1. 首页首页
  2. 科技前沿科技前沿

2025年热点图

科技前沿 • • 阅读 44

热点图热点图 lt html lang en gt lt head gt lt meta charset UTF 8 gt lt meta name viewport content

大家好，我是讯享网，很高兴认识大家。

热点图

在这里插入图片描述
讯享网

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大数据热点图</title> <style> body { 
     background-color: #333; } .map { 
     position: relative; width: 747px; height: 616px; background: url(./images/map.png) no-repeat; margin: 0 auto; } .city { 
     position: absolute; top: 227px; right: 193px; } .dotted { 
     width: 8px; height: 8px; background-color: #09f; border-radius: 50%; } .city div[class^="pulse"] { 
     position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation: pulse 1.2s linear infinite; } .city div.pulse2 { 
     animation-delay: 0.4s; } .city div.pulse3 { 
     animation-delay: 0.8s; } @keyframes pulse { 
     0% { 
    } 70% { 
     /* transform: scale(5); 我们不要用scale 因为他会让 阴影变大*/ width: 40px; height: 40px; opacity: 1; } 100% { 
     width: 70px; height: 70px; opacity: 0; } } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body> </html>

讯享网
小讯
上一篇 2025-01-25 08:36
下一篇 2025-03-21 13:38

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/122055.html