CSS 制作波浪效果的思路


Posted in HTML / CSS onMay 18, 2021

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

纯 CSS 实现波浪效果!

巧用 CSS 实现酷炫的充电动画

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

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

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

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

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

CSS 制作波浪效果的思路

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

CSS 制作波浪效果的思路

利用这个思路,我们也可以通过多个 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;
}

效果如下:

CSS 制作波浪效果的思路

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;
    }
}

效果如下:

CSS 制作波浪效果的思路

接下来,只需要,让每个子元素的动画顺序设定一个不同时间的负延迟即可,就可以得到一个初步的波浪效果,这里为了减少工作量,我们借助 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;
    }
}

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

CSS 制作波浪效果的思路

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});
    }
}

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

CSS 制作波浪效果的思路

法二:通过 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() 的变换是如何的:

CSS 制作波浪效果的思路

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

CSS 制作波浪效果的思路

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

CodePen -- PureCSS Wave Effects

混合使用

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

类似这样:

CSS 制作波浪效果的思路

CodePen -- PureCSS Wave Effects 2

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

CSS 制作波浪效果的思路

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

CSS 制作波浪效果的思路

CodePen Demo -- PureCSS Wave - Sea Group Logo

缺点

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

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

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

最后

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

到此这篇关于CSS 制作波浪效果的思路的文章就介绍到这了,更多相关CSS制作波浪内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
HTML通过表单实现酒店筛选功能
面试必问:圣杯布局和双飞翼布局的区别
May 13 #HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 #HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
You might like
利用 window_onload 实现select默认选择
2006/10/09 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php curl基本操作详解
2013/07/23 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python while 循环使用的简单实例
2016/06/08 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
python else语句在循环中的运用详解
2020/07/06 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
请解释接口的显式实现有什么意义
2012/05/26 面试题
美发店5.1活动方案
2014/01/24 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
培训通知书模板
2015/04/17 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书