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

开发 前端
本文将会再介绍另外一种使用 CSS 实现的波浪效果,思路非常有意思。

[[400009]]

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

  • 纯 CSS 实现波浪效果![1]
  • 巧用 CSS 实现酷炫的充电动画[2]

本文将会再介绍另外一种使用 CSS 实现的波浪效果,思路非常有意思。

从定积分实现曲边三角形面积说起

在进入主题之前,先看看这个,在高等数学中,我们可以通过定积分求二次函数曲边图形面积。

我们可以将曲线下的面积分割成 n 个的细高的矩形,当 n 无限趋近于无穷时,所有矩形的面积就等于曲边图形的面积。

两张简单的示意图,图取自为什么定积分可以求面积?[3]

当 n 无限趋近于无穷时,所有矩形的面积就等于曲边图形的面积:

image

利用这个思路,我们也可以通过多个 div 在 CSS 中模拟出一条曲边,也就是波浪线。

Step 1. 将图形切割为多份

首先,我们可以定义一个父容器,父容器下有 12 个子 div:

  1. <div class="g-container"
  2.   <div class="g-item"></div> 
  3.   <div class="g-item"></div> 
  4.   <div class="g-item"></div> 
  5.   <div class="g-item"></div> 
  6.   <div class="g-item"></div> 
  7.   <div class="g-item"></div> 
  8.   <div class="g-item"></div> 
  9.   <div class="g-item"></div> 
  10.   <div class="g-item"></div> 
  11.   <div class="g-item"></div> 
  12.   <div class="g-item"></div> 
  13.   <div class="g-item"></div> 
  14. </div> 

通过 flex 布局,简单布局一下,得到这样一个图形,每个子元素等高:

  1. .g-container { 
  2.     width: 200px; 
  3.     height: 200px; 
  4.     border: 2px solid #fff; 
  5.     display: flex; 
  6.     align-items: flex-end
  7.  
  8. .g-item { 
  9.     flex-grow: 1; 
  10.     height: 60px; 
  11.     background-color: #fff; 

效果如下:

Step 2. 让每个子元素以不同负延迟运行高度变换动画

接下来,简单改造下,我们需要让这个图动起来,通过改变每个子元素的高度实现:

  1. .g-item { 
  2.     flex-grow: 1; 
  3.     height: 60px; 
  4.     background-color: #000; 
  5.     animation: heightChange 1s infinite ease-in-out alternate; 
  6.  
  7. @keyframes heightChange { 
  8.     from { 
  9.         height: 60px; 
  10.     } 
  11.     to { 
  12.         height: 90px; 
  13.     } 

效果如下:

图片

接下来,只需要,让每个子元素的动画顺序设定一个不同时间的负延迟即可,就可以得到一个初步的波浪效果,这里为了减少工作量,我们借助 SASS 实现:

  1. $count: 12; 
  2. $speed: 1s; 
  3.  
  4. .g-item { 
  5.     --f: #{$speed / -12}; 
  6.     flex-grow: 1; 
  7.     height: 60px; 
  8.     background-color: #000; 
  9.     animation: heightChange $speed infinite ease-in-out alternate; 
  10.  
  11. @for $i from 0 to $count { 
  12.     .g-item:nth-child(#{$i + 1}) { 
  13.         animation-delay: calc(var(--f) * #{$i}); 
  14.     } 
  15.  
  16. @keyframes heightChange { 
  17.     from { 
  18.         height: 60px; 
  19.     } 
  20.     to { 
  21.         height: 90px; 
  22.     } 

这样,我们就得到了一个初步的波浪效果:

图片

Step 3. 消除锯齿

可以看到,上述的波浪动画是存在一定的锯齿的,接下来我们要做的就是尽可能的消除掉这些锯齿。

法一:增加 div 的数量

按照一开始使用定积分求曲边图形面积的思想,我们只需要尽可能增加子 div 的数量即可,当 div 的数量无穷多的时候,锯齿也就会消失不见。

我们可以尝试将上述的 12 个子 div,替换成 120 个试下,一个一个写 120 个 div 太费力了,我们这里借助 Pug[4] 模板引擎:

  1. div.g-container 
  2.  -for(var i=0; i<120; i++) 
  3.     div.g-item 

对于 CSS 代码,只需要改动动画延迟的时间即可,120 个子 div 的负延迟都控制在 1s 内:

  1. // 12 -- 120 
  2. $count: 120; 
  3. $speed: 1s; 
  4.  
  5. .g-item { 
  6.     // 注意,只有这里发生了变化 
  7.     --f: #{$speed / -120}; 
  8.     flex-grow: 1; 
  9.     height: 60px; 
  10.     background-color: #000; 
  11.     animation: heightChange $speed infinite ease-in-out alternate; 
  12.  
  13. @for $i from 0 to $count { 
  14.     .g-item:nth-child(#{$i + 1}) { 
  15.         animation-delay: calc(var(--f) * #{$i}); 
  16.     } 

这样,我们就可以得到一条比较光滑的曲线啦:

图片

法二:通过 transform: skew() 模拟弧度

当然,实际情况,使用那么多个 div 实在是太浪费了,那么有没有其它方法在 div 数量比较少的情况下,也能够尽可能的消除锯齿呢?

这里,我们可以尝试给子元素在运动变换的过程中添加不同的 transform: skewY() 去模拟弧度。

再改造下代码,我们将 div 的数量调低,并且给每个子 div 再添加一个 transform: skewY()的动画效果:

  1. div.g-container 
  2.  -for(var i=0; i<24; i++) 
  3.     div.g-item 

完整的 CSS 代码如下:

  1. $count: 24; 
  2. $speed: 1s; 
  3.  
  4. .g-item { 
  5.     // 注意,只有这里发生了变化 
  6.     --f: #{$speed / -24}; 
  7.     flex-grow: 1; 
  8.     height: 60px; 
  9.     background-color: #000; 
  10.     animation:  
  11.         heightChange $speed infinite ease-in-out alternate, 
  12.         skewChange $speed infinite ease-in-out alternate; 
  13.  
  14. @for $i from 0 to $count { 
  15.     .g-item:nth-child(#{$i + 1}) { 
  16.         animation-delay:  
  17.             calc(var(--f) * #{$i}),  
  18.             calc(var(--f) * #{$i} - #{$speed / 2}); 
  19.     } 
  20.  
  21. @keyframes heightChange { 
  22.     from { 
  23.         height: var(--h); 
  24.     } 
  25.     to { 
  26.         height: calc(var(--h) + 30px); 
  27.     } 
  28.  
  29. @keyframes skewChange { 
  30.     from { 
  31.         transform: skewY(20deg); 
  32.     } 
  33.     to { 
  34.         transform: skewY(-20deg); 
  35.     } 

为了方便理解,首先看看,高度变换动画一致的情况下,子 div 的添加了 skewY() 的变换是如何的:

图片

能看到每次变换是有明显的突起的锯齿的,叠加上延迟的高度变换,就能够很好的消除大部分的锯齿效果:

图片

至此,我们就得到了另外一种 div 数量适中的消除锯齿的方法!上述所有效果的完整代码,你可以戳这里:

CodePen -- PureCSS Wave Effects[5]

混合使用

最后,我们可以通过调整几个变量参数,将几个不同的波浪效果组合在一起,得到一些组合效果,也很不错。

类似这样:

图片

CodePen -- PureCSS Wave Effects 2[6]

基于此,我联想到我们公司(Shopee)的母公司 -- Sea Group 的 LOGO,它长得如下:

利用本文的方案,给它实现一个动态的 LOGO 动画:

图片

CodePen Demo -- PureCSS Wave - Sea Group Logo[7]

缺点

该方案的缺点还是很明显的:

  • 首先是废 div,需要比较多的 div 来实现效果,而且 div 越多,效果会越好,当然增加到一定程度,卡顿是不可避免的
  • 锯齿无法完全消除,这个是最致命或者说影响它真正能够有用武之地的地方吧

当然,本文的目的重点更多的是开拓一下思维,探讨一下这种方式的优劣,实现动画的整个过程,动画负延迟时间的运用,都是有一些参考学习意义的。CSS 还是非常有趣的~ 🤣

最后

好了,本文到此结束,希望对你有帮助 :)

参考资料

[1]纯 CSS 实现波浪效果!:

https://github.com/chokcoco/iCSS/issues/22

[2]巧用 CSS 实现酷炫的充电动画:

https://github.com/chokcoco/iCSS/issues/75

[3]为什么定积分可以求面积?:

https://www.zhihu.com/question/21439225

[4]Pug:

https://github.com/pugjs/pug

[5]CodePen -- PureCSS Wave Effects:

https://codepen.io/Chokcoco/pen/XWpxQBd

[6]CodePen -- PureCSS Wave Effects 2:

https://codepen.io/Chokcoco/pen/yLgQgLo

[7]CodePen Demo -- PureCSS Wave - Sea Group Logo:

https://codepen.io/Chokcoco/pen/zYZrmvb

[8]Github -- iCSS:

https://github.com/chokcoco/iCSS

 

责任编辑:姜华 来源: iCSS前端趣闻
相关推荐

2022-06-23 07:05:46

跳板机服务器PAM

2010-08-23 14:25:13

marginCSS

2016-10-13 10:57:55

phptcp专栏

2018-04-18 07:34:58

2016-10-26 09:12:58

2023-09-17 23:16:46

缓存数据库

2024-05-09 08:20:29

AC架构数据库冗余存储

2020-11-27 14:45:57

开发服务器代码

2020-12-23 10:10:23

Pythonweb代码

2022-07-07 10:33:27

Python姿势代码

2022-06-22 09:44:41

Python文件代码

2020-12-09 10:15:34

Pythonweb代码

2024-04-26 08:58:54

if-else代码JavaSpring

2024-04-30 08:12:05

CRUD方法JavaAC架构

2019-11-22 09:21:17

技术研发数据

2017-08-24 15:02:01

前端增量式更新

2021-09-28 08:26:06

CSS 技巧文字镂空波浪

2023-06-05 09:28:32

CSS渐变

2014-03-17 10:30:12

网络服务器

2017-02-14 17:29:42

Android毛玻璃虚化效果
点赞
收藏

51CTO技术栈公众号