通过 flex 布局，简单布局一下，得到这样一个图形，每个子元素等高：
.g-container {
width: 200px;
height: 200px;
border: 2px solid #fff;
display: flex;
align-items: flex-end;
}
.g-item {
flex-grow: 1;
height: 60px;
background-color: #fff;
}效果如下：
Step 2. 让每个子元素以不同负延迟运行高度变换动画
接下来，简单改造下，我们需要让这个图动起来，通过改变每个子元素的高度实现：
.g-item {
flex-grow: 1;
height: 60px;
background-color: #000;
animation: heightChange 1s infinite ease-in-out alternate;
}
@keyframes heightChange {
from {
height: 60px;
}
to {
height: 90px;
}
}效果如下：
接下来，只需要，让每个子元素的动画顺序设定一个不同时间的负延迟即可，就可以得到一个初步的波浪效果，这里为了减少工作量，我们借助 SASS 实现：
$count: 12;
$speed: 1s;
.g-item {
--f: #{$speed / -12};
flex-grow: 1;
height: 60px;
background-color: #000;
animation: heightChange $speed infinite ease-in-out alternate;
}
@for $i from 0 to $count {
.g-item:nth-child(#{$i + 1}) {
animation-delay: calc(var(--f) * #{$i});
}
}
@keyframes heightChange {
from {
height: 60px;
}
to {
height: 90px;
}
}这样，我们就得到了一个初步的波浪效果：
Step 3. 消除锯齿
可以看到，上述的波浪动画是存在一定的锯齿的，接下来我们要做的就是尽可能的消除掉这些锯齿。
法一：增加 div 的数量
按照一开始使用定积分求曲边图形面积的思想，我们只需要尽可能增加子 div 的数量即可，当 div 的数量无穷多的时候，锯齿也就会消失不见。
我们可以尝试将上述的 12 个子 div，替换成 120 个试下，一个一个写 120 个 div 太费力了，我们这里借助 Pug 模板引擎：
div.g-container
-for(var i=0; i<120; i++)
div.g-item
对于 CSS 代码，只需要改动动画延迟的时间即可，120 个子 div 的负延迟都控制在 1s 内：
// 12 -- 120
$count: 120;
$speed: 1s;
.g-item {
// 注意，只有这里发生了变化
--f: #{$speed / -120};
flex-grow: 1;
height: 60px;
background-color: #000;
animation: heightChange $speed infinite ease-in-out alternate;
}
@for $i from 0 to $count {
.g-item:nth-child(#{$i + 1}) {
animation-delay: calc(var(--f) * #{$i});
}
}这样，我们就可以得到一条比较光滑的曲线啦：
法二：通过 transform: skew() 模拟弧度
当然，实际情况，使用那么多个 div 实在是太浪费了，那么有没有其它方法在 div 数量比较少的情况下，也能够尽可能的消除锯齿呢？
这里，我们可以尝试给子元素在运动变换的过程中添加不同的 transform: skewY() 去模拟弧度。
再改造下代码，我们将 div 的数量调低，并且给每个子 div 再添加一个 transform: skewY() 的动画效果：
div.g-container
-for(var i=0; i<24; i++)
div.g-item
完整的 CSS 代码如下：
$count: 24;
$speed: 1s;
.g-item {
// 注意，只有这里发生了变化
--f: #{$speed / -24};
flex-grow: 1;
height: 60px;
background-color: #000;
animation:
heightChange $speed infinite ease-in-out alternate,
skewChange $speed infinite ease-in-out alternate;
}
@for $i from 0 to $count {
.g-item:nth-child(#{$i + 1}) {
animation-delay:
calc(var(--f) * #{$i}),
calc(var(--f) * #{$i} - #{$speed / 2});
}
}
@keyframes heightChange {
from {
height: var(--h);
}
to {
height: calc(var(--h) + 30px);
}
}
@keyframes skewChange {
from {
transform: skewY(20deg);
}
to {
transform: skewY(-20deg);
}
}为了方便理解，首先看看，高度变换动画一致的情况下，子 div 的添加了 skewY() 的变换是如何的：
能看到每次变换是有明显的突起的锯齿的，叠加上延迟的高度变换，就能够很好的消除大部分的锯齿效果：
至此，我们就得到了另外一种 div 数量适中的消除锯齿的方法！上述所有效果的完整代码，你可以戳这里：
CodePen -- PureCSS Wave Effects
混合使用
最后，我们可以通过调整几个变量参数，将几个不同的波浪效果组合在一起，得到一些组合效果，也很不错。
类似这样：
CodePen -- PureCSS Wave Effects 2
基于此，我联想到我们公司（Shopee）的母公司 -- Sea Group 的 LOGO，它长得如下：
利用本文的方案，给它实现一个动态的 LOGO 动画：
CodePen Demo -- PureCSS Wave - Sea Group Logo
缺点
该方案的缺点还是很明显的：
当然，本文的目的重点更多的是开拓一下思维，探讨一下这种方式的优劣，实现动画的整个过程，动画负延迟时间的运用，都是有一些参考学习意义的。CSS 还是非常有趣的~
什么是css
css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。
以上是“如何使用CSS制作波浪效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
文章名称：如何使用CSS制作波浪效果
文章路径：http://csdahua.cn/article/gpdjjs.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
