共计 3467 个字符，预计需要花费 9 分钟才能阅读完成。
在之前，我介绍过几种应用纯 CSS 实现波浪成果的形式，对于它们有两篇相干的文章：
- 纯 CSS 实现波浪成果!
- 巧用 CSS 实现酷炫的充电动画
本文将会再介绍另外一种应用 CSS 实现的波浪成果，思路十分有意思。
从定积分实现曲边三角形面积说起
在进入主题之前，先看看这个，在高等数学中，咱们能够通过定积分求二次函数曲边图形面积。
咱们能够将曲线下的面积宰割成 n 个的细高的矩形，当 n 有限趋近于无穷时，所有矩形的面积就等于曲边图形的面积。
两张简略的示意图，图取自为什么定积分能够求面积？：
当 n 有限趋近于无穷时，所有矩形的面积就等于曲边图形的面积：
利用这个思路，咱们也能够通过多个 div 在 CSS 中模拟出一条曲边，也就是波浪线。
Step 1. 将图形切割为多份
首先，咱们能够定义一个父容器，父容器下有 12 个子 div：
<div class="g-container">
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
</div> 通过 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
毛病
该计划的毛病还是很显著的：
- 首先是废 div，须要比拟多的 div 来实现成果，而且 div 越多，成果会越好，当然减少到肯定水平，卡顿是不可避免的
- 锯齿无奈齐全打消，这个是最致命或者说影响它真正可能有用武之地的中央吧
当然，本文的目标重点更多的是开辟一下思维，探讨一下这种形式的优劣，实现动画的整个过程，动画负延迟时间的使用，都是有一些参考学习意义的。CSS 还是十分乏味的~ 🤣
最初
好了，本文到此结束，心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。