CSS技巧:纯CSS实现文字渐变动画效果

文字渐变动画,可以实现的有两种:一种是一行文字整体变化颜色;另一种一行文字依次变化颜色。接下来,我就介绍一下这两种文字渐变的实现过程。

布局代码:

<div class="con"><div class="animated-text">Hello World</div>
</div>
<div class="con"><div class="flow">Hello World</div>
</div>

为了呈现的效果好看些,我把两个渐变文字分别放置到两个容器中。实际请仅关注 下面代码:

<div class="">Hello World</div>

当然为了美观,我把关于文字大小和对齐的样式也写在了 con 这个容器里。贴一下CSS代码:

.con{    display: flex;height: 300px;    border-radius: 10px;background: #eaeaea;color: #333;font-size: 64px;font-weight: 700;padding: 20px;box-sizing: border-box;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */flex: 1;    margin:20px;flex-basis: 45%;margin-bottom: 10px;text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

两个动画的实现方法

第一种:一行文字整体变化颜色

先贴代码,再解释:

/* 定义文字渐变色动画 */
@keyframes text-color-change {0% {color: #ff3334; /* 动画开始时的颜色 */}20% {color: #ffcf00; /* 动画中间时的颜色 */}40% {color: #66ccff; /* 动画中间时的颜色 */}60% {color: #ff3399; /* 动画中间时的颜色 */}80% {color: #9933ff; /* 动画中间时的颜色 */}100% {color: #19e713; /* 动画结束时的颜色 */}
}/* 应用动画到元素 */
.animated-text {animation: text-color-change 2s infinite alternate; /* 动画名称,持续时间,循环次数,方向 */
}

思路:这段代码定义了一个名为 text-color-change的关键帧动画,它会在五个颜色间进行变化。然后,.animated-text类使用这个动画,并设置了动画的持续时间、循环方式和是否反向播放。这样,当应用到HTML元素上时,该元素的文本颜色将会持续变化。

第二种:一行文字依次变化颜色

先贴代码,再解释:

.flow {height: 120px;background: linear-gradient(to right, red, orange, yellow, green, cyan, blue,  purple);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation:  hue 3s linear infinite;    padding: 20px;
}
@keyframes hue {0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}
}

思路:这段代码定义了一个名为 hue 的动画,该动画将应用一个色彩旋转效果。通过 @keyframes 定义的 hue-rotate动画会从0deg旋转到360deg,形成一个完整的色环。动画的持续时间是3秒,并且设置为无限次循环(infinite),每次动画都会交替反向播放(alternate)。

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

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

相关文章

7.pwn 工具安装和使用

关闭保护的方法 pie: -no-pie Canary:-fno-stack-protector aslr:查看:cat /proc/sys/kernel/randomize_va_space 2表示打开 关闭:echo 0>/proc/sys/kernel/randomize_va_space NX:-z execstack gdb使用以及插件安装 是GNU软件系统中的标准调试工具&#xff0c;此外GD…

软件设计模式总结

设计模式是软件设计中常见问题的通用解决方案。以下是一些常见的设计模式&#xff0c;分为三大类&#xff1a;创建型模式、结构型模式和行为型模式。 创建型模式&#xff08;Creational Patterns&#xff09; 这些模式提供了对象创建的机制&#xff0c;增加了已有代码的灵活性…

electron 初始使用

electron electron文档地址deno下载地址安装命令 yarn config set electron_mirror https://cdn.npm.taobao.org/dist/electron/ npm install下载文件 文件下载完成后&#xff0c;新建dist目录&#xff0c;解压到list目录下&#xff1b;path文件中写入electron.exe 运行命令 …

排序格式排序格式

排序格式排序格式

P5. 微服务: Bot代码的执行

P5. 微服务: Bot代码的执行 0 概述1 Bot代码执行框架2 Bot代码传递给BotRunningSystem3 微服务: Bot代码执行的实现逻辑3.1 整体微服务逻辑概述3.2 生产者消费者模型实现3.3 consume() 执行代码函数的实现3.4 执行结果返回给 nextStep 4 扩展4.1 Bot代码的语言 0 概述 本章介绍…

什么是CNN,它和传统机器学习有什么区别

CNN&#xff0c;全称为卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;&#xff0c;是一种专门用于处理具有网格结构数据&#xff08;如图像、视频&#xff09;的深度学习模型。它由多个卷积层、池化层、全连接层等组成&#xff0c;通过卷积运算和池化操作…

Vulnhub靶场DC-5练习

目录 0x00 准备0x01 主机信息收集0x02 站点信息收集0x03 漏洞查找与利用1. 利用burpsuite爆破文件包含的参数2. 文件包含3. nginx日志挂马4. 反弹shell5.漏洞利用和提权 0x04 总结 0x00 准备 下载链接&#xff1a;https://download.vulnhub.com/dc/DC-5.zip 介绍&#xff1a; …

kafka-3

Kafka 消费组 consumer-offsets-N 稀疏索引 Kafka集群 集群搭建 集群启动和验证 Topic的意义 Topic和Partition 分区 副本 集群操作指令 多分区&多副本 多分区消费组 Rebalance机制 Rebalance机制处理流程 Rebalance机制-Range Rebalance机制-RoudRobin Rebalance机制-St…

计数排序的实现

原理 对一个数组进行遍历&#xff0c;再创建一个count数组 每找到一个值则在count数组中对应的位置加一&#xff0c;再在count数组中找到数字上方的count值&#xff0c;count值为几&#xff0c;则打印几次数组中的值. 开空间 相对映射 排序的实现 void CountSort(int* a, i…

PageHelper分页查询遇到的小问题

如果我们是这样子直接查询 pagehelper会拼接导我们的sql语句之后 这样子我们搜索出来的list&#xff0c;就是里面参杂了PageHelper的东西 所以我们可以直接转成我们的Page类型 但是如果我们搜索出来的是List<Blog>&#xff0c;我有些信息不想返回给前端&#xff0c;所以…

mac M1安装 VSCode

最近在学黑马程序员Java最新AI若依框架项目开发&#xff0c;里面前端用的是Visual Studio Code 所以我也就下载安装了一下&#xff0c;系统是M1芯片的&#xff0c;安装过程还是有点坑的写下来大家注意一下 1.在appstore中下载 2.在系统终端中输入 clang 显示如下图 那么在终端输…

C++语言相关的常见面试题目(一)

1. const关键字的作用 答&#xff1a; 省流&#xff1a;&#xff08;1&#xff09;定义变量&#xff0c;主要为了防止修改 (2) 修饰函数参数&#xff1a;防止在函数内被改变 &#xff08;3&#xff09;修饰函数的返回值 &#xff08;4&#xff09;修饰类中的成员函数 2. Sta…

Rust入门实战 编写Minecraft启动器#1启动方法

首发于Enaium的个人博客 引言 想必大家都知道Minecraft这个游戏&#xff0c;它是一个非常有趣的游戏&#xff0c;有没有想过它是如何启动的呢&#xff1f;在本系列中&#xff0c;我们将使用Rust编写一个简单的Minecraft启动器。 本系列文章涉及的Rust知识并不多&#xff0c;了…

并发编程-05AQS原理

并发编程-深入理解AQS之ReentrantLock 一 认识AQS 在讲解AQS原理以及相关同步器之前&#xff0c;我们需要对AQS有一些基本的认识&#xff0c;了解下它有什么样的机制&#xff0c;这样追踪源码的时候就不会太过于迷茫&#xff01; 1.1 什么是AQS java.util.concurrent包中的大…

【DevOps】运维过程中经常遇到的Http错误码问题分析(二)

目录 一、HTTP 错误400 Bad Request 1、理解 400 Bad Request 错误 2、排查 400 Bad Request 错误 3、常见的解决方法 二、HTTP 错误401 Unauthorized 1、理解 401 Unauthorized 错误 2、排查 401 Unauthorized 错误 3、常见的解决方法 一、HTTP 错误400 Bad Request …

文件上传漏洞: 绕过方式及原理[表格]

序号绕过原理原理简述详细技术解释绕过方法1前端校验绕过禁用或绕过前端JavaScript验证前端JavaScript用于限制用户上传文件类型&#xff0c;但可被用户禁用或修改使用浏览器插件或开发者工具禁用JavaScript&#xff0c;或修改上传逻辑2MIME类型欺骗更改文件MIME类型以欺骗服务…

海康威视摄像头批量更改源码

更改OSD通道名称 # codingutf-8 import os import time import requests from requests.auth import HTTPBasicAuth, HTTPDigestAuth import xml.etree.ElementTree as ET#和监控摄像头通讯需要一个双方认可的密钥&#xff0c;可以随机生成 def generate_key():# 生成一个16字…

LabVIEW与OpenCV图像处理对比

LabVIEW和OpenCV在图像处理方面各有特点。LabVIEW擅长图形化编程、实时处理和硬件集成&#xff0c;而OpenCV则提供丰富的算法和多语言支持。通过DLL、Python节点等方式&#xff0c;OpenCV的功能可在LabVIEW中实现。本文将结合具体案例详细分析两者的特点及实现方法。 LabVIEW与…

某大会的影响力正在扩大,吞噬了整个数据库世界!

1.规模空前 你是否曾被那句“上有天堂&#xff0c;下有苏杭”所打动&#xff0c;对杭州的湖光山色心驰神往&#xff1f;7月&#xff0c;正是夏意正浓的时节&#xff0c;也是游览杭州的最佳时期。这座古典与现代交融的城市将迎来了第13届PostgreSQL中国技术大会。作为全球数据库…

kubebuilder示例-新

生成代码 因为kubebuilder 命令工具需要依赖linux环境 所以本例方法使用git 同步代码 在window开发后提交 linux项目里拉代码运行的方式 创建go mod 项目 go mod init kubebuild_demo 初始化项目 生成基础框架 domain 生成group用的 kubebuilder init --domain example.com …