web基础·@keyframes+animation：热点波纹图

最新推荐文章于 2023-06-30 21:56:12 发布

昔冰_G

最新推荐文章于 2023-06-30 21:56:12 发布

阅读量187

点赞数

分类专栏：前端标签属性基础文章标签： html css

本文链接：https://blog.csdn.net/qq_38800316/article/details/118437163

版权

前端标签属性基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用CSS动画技巧，通过改变元素的宽高而非使用`transform:scale()`来实现一种动态的波纹扩散效果。示例中创建了一个地图，并在特定城市位置设置了多个脉冲动画，使得这些城市点仿佛在地图上闪烁，为网页增添视觉吸引力。

摘要由CSDN通过智能技术生成

<style>
    body{
        background-color:#333;
    }
    
    .map{
        position:relative;
        width:800px;
        height:620px;
        background:url(img/map.png) no-repeat;
        margin:0 auto;
    }

    .city{
        position:absolute;
        top:228px;
        right:242px;
        color:#fff;
    }
    
    .dotted{
        width:8px;
        height:8px;
        background-color:#0099ff;
        border-radius:50%;
        /* 圆角处理50%由方框变圆点 */
    }
    
    @keyframes pulse{
        0%{    }
        70%{
            width:40px;
            height:40px;
            opacity:1;
        }
        /* 设置宽高来调整放大没有用scale()来进行缩放是因为scale()会把阴影一起放大 */
        
        100%{
            width:70px;
            height:70px;
            opacity:0;
            /* 最后的状态变成透明的，从70%~100%之间是有不透明变透明的过程 */
        }
    }    

    /* 借助属性选择器，选取.city下类名开头是pulse的盒子 */
    .city div[class^=pulse]{
        /* 同样的在city中水平垂直居中 */
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);

        /* 同样的大小 */
        width:8px;
        height:8px;

        /* 同样的动画效果（外扩发散）*/
        box-shadow:0 0 12px #0099ff;
        /* 不给加边框但是给盒子加阴影，可以让波纹效果更好 */
        
        border-radius:50%;/* 圆角 */
        animation:pulse 1s linear /* 匀速 */ infinite /* 循环播放 */;
        
    }
    
    /* 给pulse2和pulse3添加延迟，实现三个圈可以存在间隙的辐射 */
    .city div.pulse2{
        /* 只写.pulse2是无效的，权重问题会被上面的pulse覆盖掉 */
        animation-delay:0.4s;
    }
    
    .city div.pulse3{
        animation-delay:0.8s;
    }

    /* 给广州和台北做位置更新，覆盖上面的city类中定义的位置，【效果相同放一类，位置不同另归类】 */
    .gz{
        top:542px;
    }

    .tb{
        top:499px;
        right:132px;
    }
</style>

<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 class="city gz">
            <!-- 使用gz类来把city的位置坐标覆盖掉 -->
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>

        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

对于不用transform:scale()做缩放而是选用改变宽高：效果如下：