巧妙使用 CSS 渐变来实现波浪动画

目录

一、波浪的原理

二、曲面的绘制

三、波浪动画

四、文字波浪动画

五、总结一下

参考资料

 

        之前看到coco[1]的这样一篇文章：纯 CSS 实现波浪效果！[2]，非常巧妙，通过改变border-radius和不断旋转实现的波浪效果，有兴趣的可以去研究一下。

图片

这次尝试一下使用 CSS 渐变来实现这样一个效果，还可以用在文字背景上，如下

图片

不需要混合模式，花几分钟一起看看吧

一、波浪的原理

        首先可以分解一下波浪的原理，看似有点复杂，又是贝塞尔曲线，又是上下震动，其实都是视觉错觉，本质上是一个水平方向的周期性运动，曲线都是固定的，示意如下

图片

这下应该能很直观地观察到动画的规律了，其实就是两个半曲面，如下

图片

所以，问题就变成了，如何绘制两个这样的曲面？

二、曲面的绘制

提到曲面，可以想到径向渐变，并且是椭圆的。

首先来看左边这个曲面，其实就是一个透明到纯色的径向渐变，示意如下（可以想象成是一个透明的椭圆）

图片

用代码实现就是

div{background: radial-gradient(100% 57% at top ,#0000 100%,#2196F3 100.5%) no-repeat;background-size: 50% 100%;background-position: 0 100%;background-repeat: no-repeat;
}

为了自适应容器，这里都采用的是百分比单位，效果如下

图片

用同样的方式，可以绘制出右半部分，为了方便管理，可以用 CSS 变量来代替

div{--c: #2196F3;--w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;--w2: radial-gradient(100% 57% at bottom,var(--c) 100%,#0000 100.5%) no-repeat;background: var(--w1),var(--w2);background-position: 0% 100%, 100% 100%;background-size: 50% 100%;
}

效果如下

图片

这个过程中，需要细微调整一下两个曲面的位置关系，确保能够完美的衔接在一起

图片

这样，最关键的绘制就完成了

三、波浪动画

        最后就是动画了，其实就是一个重复水平运动，在这里只需要改变background-position-x就行了。

        不过需要注意的是，为了保证动画的连贯性，需要再“复制”一份完全相同的，避免在动画首尾处出现“空档”，如下（为了方便颜色，暂时用不同的颜色代替）

图片

这时，就体现出 CSS 变量的好处了，直接再写两个变量即可，如下

div{--w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;--w2: radial-gradient(100% 57% at bottom, red 100%,#0000 100.5%) no-repeat;background: var(--w1),var(--w2),var(--w1),var(--w2); /*两份*/background-position: -200% 100%, -100% 100%, 0% 100%, 100% 100%;background-size: 50% 100%;animation: m 1s infinite linear; /*无限循环动画*/
}

然后是动画关键帧，改变background-position-x即可

@keyframes m {0%  {background-position-x:-200%, -100%, 0%, 100%}100%{background-position-x:  0%, 100%, 200%, 300%}
}

这样就得到了一个水平方向不断位移的动画

图片

将颜色都改成相同后，由于看不清左右的运动，只能看到上下在晃动，就感觉非常像一个波浪了

图片

下面是完整代码，是不是非常少？

.wave{width: 400px;height: 200px;outline: 2px dashed gray;--c: #2196F3;--w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;--w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat;background: var(--w1),var(--w2),var(--w1),var(--w2);background-position-x: -200%, -100%, 0%, 100%;background-position-y: 100%;background-size: 50.5% 100%;animation: m 1s infinite linear;
}
@keyframes m {0%  {background-position-x:-200%, -100%, 0%, 100%}100%{background-position-x:  0%, 100%, 200%, 300%}
}

你也可以访问以下任意链接：

  • CSS gradient wave (juejin.cn)[3]

  • CSS gradient wave (codepen.io)[4]

  • CSS gradient wave (runjs.work)[5]

四、文字波浪动画

        相比于其他实现，渐变的最大优势是不占用任何标签，包括伪元素，这样即使在非常苛刻的情况下也能使用，比如文章开头的文字波浪效果

图片

由于只是背景，直接像普通的渐变文字那样使用就行了，完整代码如下

.txt{--c: #2196F3;--w1: radial-gradient(100% 57% at top ,#0000 100%,var(--c) 100.5%) no-repeat;--w2: radial-gradient(100% 57% at bottom, var(--c) 100%,#0000 100.5%) no-repeat;background: var(--w1),var(--w2),var(--w1),var(--w2);background-position-x: -200%, -100%, 0%, 100%;background-position-y: 100%;background-size: 50.5% 100%;animation: m 1s infinite linear;font-size: 100px;font-weight: bold;color: transparent;-webkit-background-clip: text; /*文本裁切*/-webkit-text-stroke: 2px var(--c);
}
@keyframes m {0%  {background-position-x:-200%, -100%, 0%, 100%}100%{background-position-x:  0%, 100%, 200%, 300%}
}

之前在这篇文章：CSS & SVG foreignObject 实现文字镂空波浪动画[6]中用到了SVG foreignObject实现的，有兴趣的可以回顾一下

你也可以访问以下任意链接：

  • CSS gradient wave text (juejin.cn)[7]

  • CSS gradient wave text (codepen.io)[8]

  • CSS gradient wave text (runjs.work)[9]

五、总结一下

以上就是全部内容了，相信实现起来没有太多的难点，主要就是径向渐变的运用，下面总结一下

  1. 波浪的本质上是一个曲面在水平方向的周期性运动，曲面本身并没有变化

  2. 波浪可以拆分为两个不同方向上的径向渐变

  3. 特别需要注意渐变的尺寸和位置，确保能够完美的衔接在一起

  4. 动画其实就是不断改变渐变的水平位置，也就是 background-position-x

  5. 相比于其他实现，渐变的最大优势是不占用任何标签

  6. 还可以轻易的实现文字波浪效果

        一般同样的效果我都会尽量用多种方式去实现，每种方式都有各自不同的优缺点，以便于应对各自不同的应用场景。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤

参考资料

[1] coco: https://juejin.cn/user/2330620350437678

[2] 纯 CSS 实现波浪效果！: https://juejin.cn/post/6844903487705186317

[3] CSS gradient wave (juejin.cn): https://code.juejin.cn/pen/7239632409237880892

[4] CSS gradient wave (codepen.io): https://codepen.io/xboxyan/pen/xxyoyPK

[5] CSS gradient wave (runjs.work): https://runjs.work/projects/1a6b73b0ce224ee1

[6] CSS & SVG foreignObject 实现文字镂空波浪动画: https://juejin.cn/post/7069611855513124895

[7] CSS gradient wave text (juejin.cn): https://code.juejin.cn/pen/7239663677074243588

[8] CSS gradient wave text (codepen.io): https://codepen.io/xboxyan/pen/PoyrXdP

[9] CSS gradient wave text (runjs.work): https://runjs.work/projects/8336f8017a0a449f

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/27025.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【unity细节】分不清楚__世界坐标，自身坐标，Vector3，transform和translate？

【unity细节】分不清楚__世界坐标，自身坐标，Vector3，transform和translate？

👨‍💻个人主页：元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 收录于专栏：unity细节和bug ⭐世界坐标系transform和自身坐标Trasform.local和Vector3⭐ 文章目录 ⭐世界坐标…
阅读更多...
excel常用操作备忘

excel常用操作备忘

excel操作： 1、快速填充多列公式：选中多列后，按ctrlD填 充。 2、快速删除空行：全选行，按ctrlG，空值项前边打上钩，点确定，针对选中的空行，鼠标右击，点删除&…
阅读更多...
APACHE KAFKA本机Hello World教程

APACHE KAFKA本机Hello World教程

目标 最近想要简单了解一下Apache Kafka，故需要在本机简单打个Kafka弄一弄Hello World级别的步骤。 高手Kafka大佬们，请忽略这里的内容。 步骤 Apacha Kafka要求按照Javak8以上版本的环境。从官网下载kafka并解压。 启动 # 生产kafka集群随机ID KA…
阅读更多...
【机密计算标准】GB/T 41388-2022 可信执行环境基础安全规范

【机密计算标准】GB/T 41388-2022 可信执行环境基础安全规范

1 范围 本文件确立了可信执行环境系统整体技术架构，描述了可信执行环境基础要求、可信虚拟化系统、可信操作系统、可信应用与服务管理、跨平台应用中间件等主要内容及其测试评价方法。 2 规范性引用文件 下列文件中的内容通过文中的规范性引用面构成本文件必不…
阅读更多...
❤️创意网页：如何创建一个漂亮的3D正六边形

❤️创意网页：如何创建一个漂亮的3D正六边形

✨博主：命运之光 🌸专栏：Python星辰秘典 🐳专栏：web开发（简单好用又好看） ❤️专栏：Java经典程序设计 ☀️博主的其他文章：点击进入博主的主页 前言：欢迎踏入…
阅读更多...
Python多线程编程Queue队列使用方法

Python多线程编程Queue队列使用方法

一、多线程编程Queue队列 在多线程编程中，由于多个线程并发执行，可能会导致线程之间出现协调问题，为了保证线程间的同步和协调，Python提供了Queue模块，支持多线程间的数据交换和同步。Queue是一种线程安全的数据结构&…
阅读更多...
MYSQL常见面试题汇总

MYSQL常见面试题汇总

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员，2024届电子信息研究生 目录 1、三大范式 2、DML 语句和 DDL 语句区别 3、主键和外键的区别 4、drop、delete、truncate 区别 5、基础架构 6、MyISAM 和 InnoDB 有什么区别？ 7、推荐自增id作…
阅读更多...
用 PerfView 洞察.NET程序非托管句柄泄露

用 PerfView 洞察.NET程序非托管句柄泄露

一：背景 1. 讲故事 前几天写了一篇 如何洞察 .NET程序 非托管句柄泄露 的文章，文中使用 WinDbg 的 !htrace 命令实现了句柄泄露的洞察，在文末我也说了，WinDbg 是以侵入式的方式解决了这个问题，在生产环境中大多数情况…
阅读更多...
深度学习（28）——YOLO系列（7）

深度学习（28）——YOLO系列（7）

深度学习（28）——YOLO系列（7） 咱就是说，需要源码请造访：Jane的GitHub：在这里 上午没写完的，下午继续，是一个小尾巴。其实上午把训练的关键部分和数据的关键部分都写完了…
阅读更多...
青岛大学_王卓老师【数据结构与算法】Week05_07_顺序栈的操作1_学习笔记

青岛大学_王卓老师【数据结构与算法】Week05_07_顺序栈的操作1_学习笔记

本文是个人学习笔记，素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享， 另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权，请留言作删文处理。 课程视频链接： 数据结构与算法基础…
阅读更多...
SqlServer数据库【基础-更删改查】

SqlServer数据库【基础-更删改查】

一、创建语句 （1）创建数据库 1.检查系统中是否存在这个数据库，存在则删除 格式： if exists(select * from sysdatabases where name数据库名) drop database 数据库名 go例子： if exists(select * from sysdataba…
阅读更多...
Go语言之函数补充defer语句,递归函数,章节练习

Go语言之函数补充defer语句,递归函数,章节练习

defer语句是go语言提供的一种用于注册延迟调用的机制，是go语言中一种很有用的特性。 defer语句注册了一个函数调用，这个调用会延迟到defer语句所在的函数执行完毕后执行，所谓执行完毕是指该函数执行了return语句、函数体已执行完最后一条语句…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023