手把手教你：纯CSS实现炫酷的水波动画

一条会coding的Shark
2,686 阅读3分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

时隔一个多月，又带着 css 来和大家见面了，这次又给大家带来一个炫酷的水波动画特效。话不多说，直接上效果：

juejin - 码上掘金

实现思路

这次以掘金拼音为主题，在其内部实现一个水波荡漾效果，具有立体感。整个效果的实现思路很简单，并没有用到很多复杂的属性。看到这个水波效果，相信大家第一眼就能想到动画 @keyframe 吧。因此，这里面只需要大家掌握一些基本的动画知识即可。接下来就手把手教大家实现它。

html部分

Html 部分非常简单，只需设置一个基本的 div 盒子，然后放入自己想要的字体拼音即可，这里我放入掘金的拼音字母。相关代码如下：

   <div class="container">
        <h2>Juejin</h2>
        <h2>Juejin</h2>
    </div>

css部分

设计完 html 部分，接下来就来设计样式了。基本样式还是和之前一样，先来上一段必用的 css 代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}

这段代码将全局的样式设置好，相当于 rest 作用，另外它还可以实现水平居中的效果。每次我写 css 相关的代码时，它必不可少。

然后开始为 container 盒子以及文本设计基本样式了，这里是实现的关键部分。在这里首先给 container 盒子做一个相对定位，然后对文本做一个绝对定位，再通过 transform 来达到居中效果。现在关键部分来了，在文本中定义一个名为 animate 的动画，通过该动画来控制水波荡漾效果。相关代码如下：

.container{
    position: relative;
}
.container h2{
    position: absolute;
    font-size: 8em;
    transform: translate(-50%,-50%);
}
.container h2:nth-child(1){
    color: transparent;
    -webkit-text-stroke: 2px skyblue;
}
.container h2:nth-child(2){
    color: skyblue;
    animation: animate 4s ease-in-out infinite;
}

这里解释一下 animation 的属性。animate 是自定义的动画名称；4s 是动画的播放时间；ease-in-out 是指动画以低速开始，并以低速结束；infinite 表示动画无限次播放。

这是没有动画效果的展示图：

image.png

动画部分

这里将用到一个新属性：clip-path。该属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。大家看到的参差不齐的水波就是通过该属性裁剪出来的，这里使用的是比较基础的方法，更详细的使用方法可以参考官方文档。

那么，该属性的值该如何控制呢，这里给大家介绍一个工具网站： CSS Clip-Path Generator - CSS Portal。通过这个工具就能很轻松地定义自己想要的裁剪属性值，并且使用起来十分简单。

image.png

自定义好裁剪值后，就可以将其放入定义好的 animate 动画中的 clip-path属性。相关代码如下：

@keyframes animate {
    0%,100%{
        -webkit-clip-path: polygon(0 51%, 18% 72%, 46% 73%, 65% 60%, 82% 67%, 100% 46%, 99% 98%, 0% 99%);
        clip-path: polygon(0 51%, 18% 72%, 46% 73%, 65% 60%, 82% 67%, 100% 46%, 99% 98%, 0% 99%);
    }
    50%{
        -webkit-clip-path: polygon(0 55%, 16% 37%, 35% 53%, 60% 40%, 80% 57%, 100% 46%, 99% 98%, 0% 99%);
        clip-path: polygon(0 55%, 16% 37%, 35% 53%, 60% 40%, 80% 57%, 100% 46%, 99% 98%, 0% 99%)
    }
}

这是加上动画之后的展示图：

掘金.gif

总结

整体看完之后是不是觉得很简单，但是又不失炫酷的效果。若对它感兴趣的朋友可以去试试，可以选择用别的拼音字母代替，或者换成其他更具风格的颜色。如果有更好的实现效果或者实现思路，可以在评论区告诉我ღ( ´･ᴗ･` )。

avatar
文章
阅读
粉丝