在之前，我介绍过几种应用纯 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 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。