手把手教你用纯CSS实现波浪效果

一条会coding的Shark
4,244 阅读4分钟

前言

这次又很久没有更新文章了。这次趁着周末下午的闲暇时刻来更新一下文章，这回给大伙带来的是一个波浪动画，具体效果可以参考下面的码上掘金效果预览。

效果预览

这里我们想一想这样的效果应该如何实现？想让它有波浪效果，关键在于我们需要设置好相应动画。话不多说，咱们直接开始写代码来实现它。

HTML实现

HTML这一部分主要是实现主体结构部分。我们可以创建好一个类名为wavy的盒子，这个是用来实现波浪的主体，后面用CSS样式填充即可。在盒子内部，有三个span元素，它们被用来创建波浪的波峰和波谷。接下来这一部分可有可无，我这里创建它主要是为了丰富页面，放置一段文本内容。至此，关于HTML这一部分我们已经完成了。相关代码如下：

<section>
        <div class="wavy">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="content">
            <h2>Wavy Section</h2>
        </div>
</section>

<section>是HTML5中定义新增的标签，用于包裹一组相关内容。整个section的具体表现和样式将取决于为这些元素添加的样式和内容。

CSS实现

现在我们来编写CSS样式代码，整个波浪效果的关键实现主要在于CSS动画的编写。根据我们前面设计的HTML部分，我们可以进行如下样式设计。

section .wavy{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4973ff;
}
section .wavy span{
    position: absolute;
    width: 325vh;
    height: 325vh;
    top: 0;
    left: 50%;
    transform: translate(-50%,-75%);
    background: #000;
}

wavy 类的元素样式的定位方式设置为绝对定位，相对于其最近的具有定位的父元素进行定位，并设置一个背景颜色。wavy里面的span元素也设置为绝对定位，元素的高度和宽度都设置为视口高度的325倍，并使用偏移转换transform: translate(-50%,-75%);将元素向左上方移动50% 的宽度和75% 的高度。

section .wavy span:nth-child(1){
    animation: animate 5s linear infinite;
    border-radius: 45%;
    background: rgba(20,20,20,1);
}
section .wavy span:nth-child(2){
    animation: animate 10s linear infinite;
    border-radius: 40%;
    background: rgba(20,20,20,0.5);
}
section .wavy span:nth-child(3){
    animation: animate 15s linear infinite;
    border-radius: 42.5%;
    background: rgba(20,20,20,0.5);
}

这里我们需要为每个span元素指定不同的样式。对于第一个span元素，应用名为animate的动画效果，持续时间为5秒，使用线性的时间曲线，并且无限循环播放。对于第二个span元素，同样应用名为animate的动画效果，只不过持续时间为10秒，使用线性的时间曲线，并且无限循环播放。对于第三个span元素，继续应用名为animate的动画效果，持续时间增加为15秒，使用线性的时间曲线，并且无限循环播放。设置不同的持续时间是为了让它们以不同的速度播放。另外这三个span元素的背景颜色和边框半价也需设置为不同，这样配合animate动画就可以呈现出波浪效果。

关于这个自定义动画animate，相关代码如下：

@keyframes animate {
    0%{
        transform: translate(-50%,-75%) rotate(0deg);
    }
    100%{
        transform: translate(-50%,-75%) rotate(360deg);
    }
}

自定义动画可以设置关键帧，通过指定在不同百分比的动画进度下的样式变化来创建动画效果。在我们这次实现的波浪动画中，定义了两个关键帧：0% 和100%。

在0% 的关键帧中，将元素应用一个转换，使其向左上方偏移50% 的宽度和75% 的高度，并且不进行旋转，即角度为0度。

在100% 的关键帧中，也是按照一样的方式将元素应用一个转换，使其向左上方偏移50% 的宽度和75% 的高度，并且以360度的角度进行旋转。

简单来说，就是在0% 和100% 之间创建过渡效果，在整个动画的持续时间内平滑地过渡样式，元素将以逆时针方向旋转360度，从而创建出平滑的旋转动画效果。

总结

其实整体实现下来并不复杂，只有 HTML 和 CSS 两个简单模块，代码简单易懂。最主要的是我们需要设计好一个类似于波浪的动画，那么这个问题就解决了，效果就可以出来了。大伙还可以在此基础上继续添加自己的内容，有极高的可拓展性，比如增大波浪的幅度等等。总之，感兴趣的小伙伴们可以去试试

avatar
文章
阅读
粉丝