css画波浪线,css波纹效果

　　之前我介绍了几种使用纯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。g容器{宽度：200px高度：200px边框：2px solid # fff显示器：flex对齐-项目：flex-end；}.g-item { flex-grow:1；高度：60px背景色：# fff}效果如下：

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

　　接下来，通过一个简单的变换，我们需要让这个图形移动，通过改变每个子元素的高度来实现：g-item { flex-grow:1；高度：60px背景色：# 000；动画：heightChange 1s无限进出交替；} @关键帧height change { from { height:60px；}到{ height:90px；}}效果如下：

　　接下来只要让每个子元素的动画序列设置一个不同时间的负延迟，就可以得到一个初步的波浪效果。在这里，为了减少工作量，我们使用SASS来实现：

　　$计数：12；$速度：1s；g-item {-f:# { $ speed/-12 }；伸缩增长：1；高度：60px背景色：# 000；动画：heightChange $speed无限进出交替；}@for $i从0到$count {。g-item:n-child(# { $ I 1 }){ animation-delay:calc(var(-f)* # { $ I })；} } @关键帧高度更改{ from { height:60px；}到{ height:90px；}}这样，我们得到一个初步的波动效果：

Step 3. 消除锯齿

　　正如你所看到的，上面的波浪动画中有一些锯齿。我们接下来需要做的是尽可能地消除这些锯齿。

　　方法1:增加div的数量

　　一开始，按照用定积分计算曲边面积的思路，我们只需要尽可能地增加子div的个数。当div的数量为无穷大时，锯齿将消失。

　　我们可以尝试用120次尝试来代替上面的12个子div。120个div一个一个写太费劲了。我们在这里使用Pug模板引擎：

　　div . g-container-for(var I=0；i120I) div.g-item对于CSS代码，只需要改变动画延迟时间即可。120个子div的负延迟控制在1s以内：

　　//12-120 $ count:120；$速度：1s；g-item {//注意只有这里变了-f:# { $ speed/-120 }；伸缩增长：1；高度：60px背景色：# 000；动画：heightChange $speed无限进出交替；}@for $i从0到$count {。g-item:n-child(# { $ I 1 }){ animation-delay:calc(var(-f)* # { $ I })；}}这样，我们可以得到一条更平滑的曲线：

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

　　当然现实中用这么多div太浪费了。在div数量比较少的情况下，有没有其他方法可以尽可能的消除混叠？

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

　　修改代码后，我们将降低DIV的数量，并为每个子DIV添加另一个transform: skewY()动画效果：

　　div . g-container-for(var I=0；i24I)div . g-item的完整CSS代码如下：

　　$计数：24；$速度：1s；g-item {//注意只有这里变了-f:# { $ speed/-24 }；伸缩增长：1；高度：60px背景色：# 000；动画：heightChange $speed无限缓入淡出交替，skewChange $speed无限缓入淡出交替；}@for $i从0到$count {。g-item:n-child(# { $ I 1 }){ animation-delay:calc(var(-f)* # { $ I })，calc(var(-f)* # { $ I }-# { $ speed/2 })；} } @ key frames height change { from { height:var(-h)；}到{ height:calc(var(-h)30px)；} } @ key frames skew change { from { transform:skewY(20 deg)；}到{ transform:skewY(-20 deg)；}}}为了便于理解，首先我们来看看在高度变换动画一致的情况下，sub-div与skewY()的变换是如何添加的：

　　可以看出，每个变换都有明显的锯齿状突起，通过叠加延迟高度变换，可以消除大多数锯齿状效果：

　　在这一点上，我们已经得到了另一个反走样的方法，一个中等数量的div！以上所有效果的完整代码，可以戳这里：

　　CodePen - PureCSS波浪效果

混合使用

　　最后我们可以通过调整几个可变参数来组合几种不同的波浪效果，得到一些组合效果，也是很不错的。

　　像这样：

　　CodePen - PureCSS波浪效果2

　　基于此，我想到了我们公司(Shopee)的母公司Sea集团的LOGO，看起来是这样的：

　　使用本文的方案为其实现了一个动态LOGO动画：

　　code pen Demo-pure CSS Wave-Sea Group徽标

　　劣势

　　这个方案的缺点是显而易见的：

　　首先是废div，需要更多的div才能达到效果，div越多效果会越好。当然，如果增加到一定程度，卡顿不可避免的锯齿是无法完全消除的。这是最致命的还是影响其真正有用性的地方。

　　当然，本文的目的是拓宽思路，探讨这种方法的优缺点，实现动画的全过程，应用动画的负延迟时间，都有一定的参考学习意义。CSS还是很有意思的~

最后

　　好了，本文到此结束。希望对你有帮助。

　　这篇关于用CSS兴风作浪的文章到此为止。关于用CSS兴风作浪的更多信息，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。