如何用css实现波纹动画效果

最新推荐文章于 2024-08-20 08:33:57 发布

Bigfishseasugar

最新推荐文章于 2024-08-20 08:33:57 发布

阅读量1.9k

点赞数

文章标签： css3 animation

本文链接：https://blog.csdn.net/weixin_42207975/article/details/105672026

版权

波纹效果可以用css的 animation 动画来实现，animation 相比单纯用 transform 能实现更为复杂的效果。

效果图：

下面三张图分别为原图、效果图和去掉背景图片后的效果图，虽然可能效果图中的“波纹”颜色比较浅，但是并不妨碍最终完成动画效果。

实现思路：

1 先写一个圆形的div（调整宽高和边框角度即可）作为波纹中心，写这个波纹中心主要是作为父盒子，并把这个波纹中心定位到背景中某个位置。

2 在这个波纹中心内，再写三个同心的圆形盒子（绝对定位居中即可），作为波纹

3 给这三个波纹盒子设置有颜色的边框，并且添加 animation 动画效果，然后分两到三步让波纹盒子宽高逐渐变大，并且让波纹盒子透明度从1到最终变为0，然后就会有一种波纹淡开的效果了。可是因为动画是同时开始的，所以看到的动画可能没有太多层次感，还需要最后的调整。

4 给这三个波纹盒子的动画设置不同的延迟开始时间，并且将动画设置为不断循环进行。

5 这样就能看到真正的波纹效果了。

具体代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body>div {
            position: relative;
            overflow: hidden;
            width: 480px;
            height: 318px;
            background: url("../images/气功.jpg") no-repeat;
        }

        body div[class^="attack"] {
            position: absolute;
            background-color: white;
        }

        body div .attack1 {
            width: 73px;
            height: 73px;
            border-radius: 73px;
            top: 227px;
            left: 81px;
        }

        body div .attack2 {
            width: 71px;
            height: 71px;
            border-radius: 71px;
            top: 83px;
            left: 209px;
        }

        body div .attack3 {
            width: 65px;
            height: 65px;
            border-radius: 65px;
            top: 91px;
            left: 421px;
        }

        @keyframes move {
            0% {
                width: 65px;
                height: 65px;
                border-radius: 65px;
                box-shadow: 0 0 0 2px #ABF8F4;
            }

            50% {
                opacity: 1;
            }

            100% {
                width: 120px;
                height: 120px;
                border-radius: 120px;
                box-shadow: 0 0 0 2px #ABF8F4;
                opacity: 0;
            }
        }

        body div[class^="pulse"] {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 65px;
            height: 65px;
            border-radius: 65px;
            /* border: #ABF8F4 solid 2px; */
            transform: translate(-50%, -50%);
            animation-name: move;
            animation-duration: .8s;
            animation-iteration-count: infinite;
        }

        body div .pulse2 {
            animation-delay: 0.2s;
        }

        body div .pulse3 {
            animation-delay: 0.4s;
        }
    </style>
</head>

<body>
    <div>
        <div class="attack1">
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="attack2">
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="attack3">
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>