一种巧妙的使用 CSS 制做波浪效果的思路

在以前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章：前端

本文将会再介绍另一种使用 CSS 实现的波浪效果，思路很是有意思。git

从定积分实现曲边三角形面积提及

在进入主题以前，先看看这个，在高等数学中，咱们能够经过定积分求二次函数曲边图形面积。github

咱们能够将曲线下的面积分割成 n 个的细高的矩形，当 n 无限趋近于无穷时，全部矩形的面积就等于曲边图形的面积。markdown

两张简单的示意图，图取自为何定积分能够求面积？：函数

当 n 无限趋近于无穷时，全部矩形的面积就等于曲边图形的面积：oop

利用这个思路，咱们也能够经过多个 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 布局，简单布局一下，获得这样一个图形，每一个子元素等高：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);
    }
}
复制代码