巧妙使用 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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初探KVM虚拟化技术:新手指南

首先了解一下虚拟化的概念 虚拟化是指对资源的逻辑抽象、隔离、再分配、管理的一个过程,通常对虚拟化的理解有广义狭义之分。广义包括平台虚拟化、应用程序虚拟化、存储虚拟化、网络虚拟化、设备虚拟化等等。狭义的虚拟化专门指计算机上模拟运行多个操作系统平台。…

面试中关于自动化测试的认识

目录 一、什么是自动化测试,自动化测试的优势是什么? 二、什么样的项目比较适合做自动化测试,什么样的不适合做自动化测试? 三、在制定自动化测试计划的时候一般要考虑哪些点? 四、编写自动化脚本时的一些规范&…

C#图片处理

查找图片所在位置 原理:使用OpenCvSharp对比查找小图片在大图片上的位置 private static System.Drawing.Point Find(Mat BackGround, Mat Identify, double threshold 0.8) {using (Mat res new Mat(BackGround.Rows - Identify.Rows 1, BackGround.Cols - Iden…

WEB:shrine

背景知识 了解Flask SSIT模板注入 题目 进行代码审计 import flask import osapp flask.Flask(__name__) /*创建了flask包下的Flask类的对象,name是一个适用于多数情况的快捷方式。有了这个参数,Flask才知道在哪里可以找到模板和静态文件*/app.confi…

【Fiddler】Fiddler实现mock测试(模拟接口数据)

软件接口测试过程中,经常会遇后端接口还没有开发完成,领导就让先介入测试,然后缩短项目时间,有的人肯定会懵,接口还没开发好,怎么介入测试,其实这就涉及到了我们要说的mock了。 一、mock原理 m…

小程序:页面跳转闪屏

自己的笔记,随手记录。扛精走开。 1、问题描述 进入页面,是一个组件,通过路由传参判断是由哪个页面进入,不同的页面拿的已选值不一样,需要回显值,在编辑数据。此时会出现一个问题,A页面中进来…

微信小程序——字符串截取

indexOf() : 判断一个字符是否在字符串 中 存在,如果存在返回该元素或字符第一次出现 的 位置 的 索引,不存在返回-1。 lastIndexOf() : 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。…

【NLP】多头注意力概念(02)

接上文: 【NLP】多头注意力概念(01) 五、计算注意力 将 Q、K 和 V 拆分为它们的头部后,现在可以计算 Q 和 K 的缩放点积。上面的等式表明,第一步是执行张量乘法。但是,必须先转置 K。 展望未来,每个张量的seq_length形状将通过其各自的张量来识别,以确保清晰…

⚡【C语言趣味教程】(3) 浮点类型:单精度浮点数 | 双精度浮点型 | IEEE754 标准 | 介绍雷神之锤 III 源码中的平方根倒数速算法 | 浮点数类型的表达方式

🔗 《C语言趣味教程》👈 猛戳订阅!!! ​—— 热门专栏《维生素C语言》的重制版 —— 💭 写在前面:这是一套 C 语言趣味教学专栏,目前正在火热连载中,欢迎猛戳订阅&#…

Linux Ubuntu安装RabbitMQ服务

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…

使用qemu创建ubuntu-base文件系统,并安装PM相关内核模块

目录 一、配置镜像二、使用qemu模拟nvdimm(安装PM相关内核模块)运行记录 遇到的一些问题1、ext4文件系统损坏问题:系统启动时,遇到ext4的报错信息解决办法:2、内核模块未成功加载3、qemu报错4、主机终端无法正常打开5、…

【Spring 】执行流程解析:了解Bean的作用域及生命周期

哈喽,哈喽,大家好~ 我是你们的老朋友:保护小周ღ 今天给大家带来的是 Spring 项目的执行流程解析 和 Bean 对象的6 种作用域以及生命周期,本文将为大家讲解,一起来看看叭~ 本期收录于博主的专栏:JavaEE_保…

数据库应用:MySQL高级语句(一)

目录 一、理论 1.常用查询 2.函数 3.进阶查询 二、实验 1.普通查询 2.函数 3.进阶查询 三、问题 1.MySQL || 运算符不生效 四、总结 一、理论 1.常用查询 常用查询包括:增、删、改、查; 对 MySQL 数据库的查询,除了基本的查询外…

网络安全能力成熟度模型介绍

一、概述 经过多年网络安全工作,一直缺乏网络安全的整体视角,网络安全的全貌到底是什么,一直挺迷惑的。目前网络安全的分类和厂家非常多,而且每年还会冒出来不少新的产品。但这些产品感觉还是像盲人摸象,只看到网络安…

09_SPI-Flash 页写实验

09_SPI-Flash 页写实验 1. 实验目标2. 操作时序3. 模块框图3.1 顶层模块3.2 页写模块 4. 波形图5. RTL5.1 flash_pp_ctrl5.2 spi_flash_pp 6. Testbench6.1 tb_flash_pp_ctrl6.2 tb_spi_flash_pp 1. 实验目标 使用页写指令,向 Flash 中写入 N 字节数据,…

Linux查看某进程所部署的目录路径

1.首先查看系统中正在跑的进程都有什么 ps -ef 2.然后通过抓取你要看的进程名,比如哪些服务 ps -ef | grep xxxxx(服务名) Linux在启动一个进程时,系统会在 /proc 下创建一个以PID命名的文件夹; 在该文件夹下会有我们的进程的信息&#…

高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测教程

详情点击链接:高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测 第一:预测平台及安装 一、高精度气象预测基础 综合气象观测数值模拟模式; 全球预测模式、中尺度数值模式; 二、自动化预测平台 Linux系统 Crontab…

redis 相关

redis相关面试题 redis支持哪几种数据形式? String,hash,set,zset,list redis主要消费什么物理资源? 内存,key-value的形式, redis 具有快速和数据持久化的特征,如果不将数据放在内存中,磁盘 I/O 速度为严…

PWM呼吸灯+流水灯设计

完成任务: 在流水灯基础上加入pwm呼吸灯设计,关于pwm呼吸灯设计可以看博主上一篇博客PWM呼吸灯设计 ,开发板上灯每两秒进行一次切换,每一个的亮灭间隔为一秒。 代码参考: module pwm_led_change(input wire …

element-ui select数据回显显示数字的问题 el-select校验失效出现阿拉伯数字问题

初始化参数 return {fields: [{"title":"景区","id":0},{"title":"酒店","id":1}],evaluates: [{"title":"好评","id":0},{"title":"中评","id":1…