?
<style> body{ background-color: #333; } .map{ position: relative; width: 746px; height: 617px; margin: 30px auto; background: url(../images/map.png); } .city{ position: absolute; top: 227px; right: 193px; border-radius: 50%; width: 8px; height: 8px; background-color: skyblue; } .city1{ top: 500px; right: 80px; } .city2{ top: 543px; right: 193px; } .city3{ top: 391px; right: 210px; } .city3::after{ content: "湖北"; position: absolute; top: -4px; display: inline-block; width: 41px; color: rgb(168, 168, 169); box-sizing: border-box; font-weight: 700; font-size: 4px; margin-left: 16px; margin-top: 0px; } .pao{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; box-shadow: 0 0 12px skyblue; border-radius: 50%; animation: pao 1s linear infinite; } @keyframes pao{ 0%{ } 30%{ width: 15px; height: 15px; } 70%{ width: 30px; height: 30px; } 100%{ width: 45px; height: 45px; } } .new1{ animation-delay:.4s; } .new2{ animation-delay:.6s; } </style> </head> <body> <div class="map"> <!-- 这是盒子 --> <div class="city"> <!-- 这是点和泡 --> <!-- <div class="dotted"></div> --> <div class="pao"></div> <div class="pao new1"></div> <div class="pao new2"></div> </div> <div class="city1 city"> <!-- 这是点和泡 --> <!-- <div class="dotted"></div> --> <div class="pao"></div> <div class="pao new1"></div> <div class="pao new2"></div> </div> <div class="city2 city"> <!-- 这是点和泡 --> <!-- <div class="dotted"></div> --> <div class="pao"></div> <div class="pao new1"></div> <div class="pao new2"></div> </div> <div class="city3 city"> <!-- 这是点和泡 --> <!-- <div class="dotted"></div> --> <div class="pao"></div> <div class="pao new1"></div> <div class="pao new2"></div> </div> </div> </body> </html>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #大数据热点分析图源码 #ampltstyleampgt
