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

在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思路非常有意思。 从定积分实现曲边三角形面积说起 在进入主题之前,先看看这个,在高等数学中,我们可以通 …

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

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

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

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

在进入主题之前,先看看这个,在高等数学中,我们可以通过定积分求二次函数曲边图形面积k + \ ] ` s j ` (

我们可以将曲线下的面积分割成 n 个的细高d & B O } S N的矩形,当 n 无限趋近0 + F [ @ x于无穷时,所有矩形的面积就等于V / N Y f : c B {曲边图形的面积。

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

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

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

image

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

Step 1. 将图形切割为多份

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

<div class="g-container">
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"><8 [ a ) O u @;/div>
<div class="g-item">_ @ 8 P K 4 4;</div>
<div class="g-item"></div>
<div class="g-C B s Y - s + ^item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<di_ 7 5 k x A W - -v class="g-item"></div>
<div class="g-item"I + X _ b X !></div>
<div class="g-item">&l( { _ Mt;/z ) W xdiv>
&lO R 7 S P + Nt;/div>

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

.g-container {
width: 200px;
height: 200px;
border: 2px soliq ` T z ^ m 9 e :d #fff;
display: flex;
align-items: flex-end;
}
.g-item {
flex-grow: 1;
height: 60px;
background-co_ \ jlor: #fff;
}

效果如下:

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

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

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

.g-iteg r b Q , 2 v Zm {
flex-grow: 1;
height: 60px;
background-color: #000;
animation: heightChange 1s infinits F t q 9e ease-in-out alternate;
}
@keyframes heightChange {
from {
height: 60px;
}
to {
height: 90px;
}
}

效果如下:

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

接下来,只需要,让每个子元素的动画顺序^ G 1 !设定一个不同时间的负延迟即可,就可以X ! k @ : #得到一个初步的波浪效果,这里为了减少工作量,我们x ^ 0借助 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 alternat& 7 @ /e;
}
@for $i fro! Q w G ` om 0 to $count {
.g-ir E ` v 1 {tem:nth-child(#{$i + 1}) {
animation-delay: calc(var(--f) * #{$i});
}
}
@keyframes heightChange {
from {
height: 60px;
}2 _ T k 7 Z
to {
height: 90px;
}
}

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

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

Step 3. 消除锯齿

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

法一:增加 dN s 8 r t 2iv 的数量

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

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

div.g-container
-for(var i=0; i<120; i++$ 4 A { ~ ! n 7 3)
div.z ) , cg-item

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

// 12 -- 120
$coun& ] bt: 120;
$speed: 1s;
.g-item {
// 注意,只有这里发生了变化
--f: #{$speed / -120};
flex-grow: 1;
heighv n s M k It: 60px;
background-color: #000;
animation: heightChange $speed infinite ease-in-out alternate;
}
@for $i frZ R B p 7om 0 to $count {
.g-item:nth-child(#{$i + 1}) {
animatioG ! 7n-delay: calc(var(--f) * #{$i});
}
}

这样,我们就可以得N b a B到一条比较光滑的曲线啦u % F R : 7 K j U

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

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

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

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

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

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:^ ! W # - #000;
animation:
heighY ` , S 4 # 5 C 1tChange $speed infinite ease-is ( N l @n-o1 0 P d J ^ut alternate,
skev T c 2 } owChange $speed infinite ei Z X % # J ^ \ase-in-out alternate;
}
@for $L r ] , 4 6 S Di from 0 to $count {
.g-item:nth-child(#{$i + 1}) {
animation-delay:
calc(var(--f) * #{$i}),
calc(\ S ? 5 m Vvar(--f) * #{$i} - #{$speed / 2});
}
}
@keyframes heightChange {
from {
height: va~ 2 [ @ K 4 ] & rr(--2 V K G t , Dh);
}
to {
height: calc(var(--h) + 30px);
}
}
@keyframes skez N \wChange {
from {
transform: skewY(20deg);
}
to {
transform: skewY(-20deg);
}
}

为了方便理解,首先看看,c ] w P = , O % D0 ] r #度变换动画一致的情况下,子 div 的添加了 skewY() 的变换是如何的:

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

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

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

至此,我们就得到了另外一种 div 数量适中的消z e X n . k z D L除锯齿的方法!上述所有效果的完整代码,你可以戳这@ E y 2 7 ^ P A里:

C= Q ZodePen — PureCSS Wave Effects

混合使用

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

类似这样:

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

CodePen — PureCSl { @S Wave Effects 2

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

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

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

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

CodePen Demo — PureCSS Wave – Sea G= g G _ ^ l { Froup Logo

缺点

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

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

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

最后

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

I @ {多精彩 CSS 技术文章汇总在我的 Github — iCSS ,持续更新,欢迎点个 st6 = U X ? ;ar 订阅收藏。

如果还有~ H O [ 0 U E _ l什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

原创文章,作者:町子门户,如若转载,请注明出处:https://www.6fzz.com/12920.html

(0)
上一篇 2021年5月19日 上午12:48
下一篇 2021年5月19日 上午12:49

相关推荐

  • PRD七坑:没有可读性的PRD都是耍流氓

    写PRD并不是产品经理的全部工作,但却是不可少的一部分,一份可读性的PRD对一个项目团队来说是至关重要的。 &…

    2021年6月27日
  • 关于产品经理的四点思考

    【本文导读】本文根据自己做产品的经验,提炼出4点思考分享给大家: 1 做产品经理,而不是功能经理; 2 做产品…

    2021年6月27日
  • css里form用法是什么

    在css中,form标签用于为用户输入创建HTML表单,语法格式为“表单内容”。form标签用于向服务器传输数据,包含input和label等元素。

    2021年5月15日
  • 图解Google V8,搞懂 JavaScript 执行逻辑

    V8 是 Google 推出的开源高性能 JavaScript 与 WebAssembly引擎,主要的应用包括Chrome浏览器以及Node.js。得益于Chrome浏览器的市场占有率,V8已经成为了当今最主流的JavaScript引擎。 很多前端开发人员对 V8 的理解还停留在表面,只是单纯地使用 …

    编程学习 2021年6月8日
  • SSM框架——thymeleaf学习总结

    本人关于thymeleaf的学习源自: https://www.bilibili.com/video/BV1qy4y117qi 1、thymeleaf的项目搭建 首先创建springboot项目,相关博客有详细的创建教程,下方仅本人推荐示例(视频中也有相关项目创建教程): IDEA创建项目教程 :h …

    2021年12月28日
  • 一起祸祸字符串的首字符吧!

    上一篇文章中我们了解了字符转换为HTML实体的方法,有需要的请看《字符如何通过函数成为html实体》。这次我们向大家介绍改变字符串首字符大小写的方法,有需要的可以参考参考。

    2021年8月4日
  • ES6-字符串-模板字符串(复习+学习)

    昨天学习了字符串对象和字符串的表示,就是利用utf-8等不同的编码方式,还有许多的对象方法,都是处理字符串的方法,挺方便的,今天我学习了一下字符串模板,这里记录i一下学习的笔记,当然,今天学习了部分内容,如果笔记有没涉及到的,可以再自行学习,话不多说,这次笔记分为两部分: 1.传统的字符串输出 2. …

    编程学习 2021年11月10日
  • css怎么去掉a标签的下划线

    css去掉a标签的下划线的方法是,给a标签添加text-decoration属性,并设置属性值为none,表示文本修饰没有线条,例如【text-decoration-line: none; 】。

    2021年5月18日
  • 超强干货|APP规范实例-详细的UI设计规范

    导读:对了一个APP开发初手来说,可能心里有很多的疑惑:屏幕设计为多宽,宽度是不是应该设置为百分比;按钮大小多…

    2021年6月27日
  • 产品经理,如何建立自己独特的产品观?

    乔布斯的苹果手机带有他极强的“极简主义”的思想,让产品附上了他的灵魂。张小龙对微信建立了极其封闭式社交关系,这…

    2021年6月27日

发表评论

您的电子邮箱地址不会被公开。