【动画：大数据热点图】

最新推荐文章于 2023-06-05 17:06:14 发布

原创

最新推荐文章于 2023-06-05 17:06:14 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

这篇博客展示了如何使用CSS实现一个地图上光波动画的效果。通过相对和绝对定位，将光波效果应用到地图上的不同城市位置，并通过设置动画延迟使每个光波依次显现。博客内容包括代码示例，解释了关键的CSS选择器和动画帧，创建了一个从中心向外扩散的光波动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.案例分析：

结构：一个map大盒子包着三个city地点盒子，三个地点盒子分别有三个pluse光波盒子

样式：map给相对定位，city给绝对定位（父绝子相），pluse也给绝地定位（子绝父绝）

核心：给每一个光波设置居中和动画效果，第二个光波盒子和第三个光波盒子一定要设置延迟

    .city>div[class^=pulse] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        box-shadow: 0 0 10px red;
        animation: bowen 3s linear infinite;
    }
    
    .pulse2 {
        animation-delay: 1s !important;
    }
    
    .pulse3 {
        animation-delay: 2s !important;
    }

2.运行结果：