【CSS文字渐变动画】

news/2025/3/31 4:13:50/

CSS文字渐变动画

  • HTML代码
  • CSS代码
  • 效果图

HTML代码

<div class="title"><h1>今天是春分</h1><p>正是春天到来的日子,花都开了,小鸟也飞回来了,大山也绿了起来,空气也有点嫩嫩的气息了</p>
</div >

CSS代码

css">
@property --@color-1 {syntax: "<color>";inherits: false;initial-value: hsl(98 100% 62%);
}@property --@color-2 {syntax: "<color>";inherits: false;initial-value: hsl(204 100% 59%);
}@keyframes gradient-change {to {--@color-1: hsl(210 100% 59%);--@color-2: hsl(310 100% 59%);}
}.title {animation: gradient-change 2s linear infinite alternate;background: linear-gradient(to right in oklch, var(--@color-1), var(--@color-2));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;
}

效果图

在这里插入图片描述


http://www.ppmy.cn/news/1583703.html

相关文章

VsCode启用右括号自动跳过(自动重写) - 自录制gif演示

VsCode启用右括号自动跳过(自动重写) - 自录制gif演示 前言 不知道大家在编程时候的按键习惯是怎样的。输入完左括号后编辑器一般会自动补全右括号&#xff0c;输入完左括号的内容后&#xff0c;是按→跳过右括号还是按)跳过右括号呢&#xff1f; for (int i 0; i < a.s…

模块23_网络编程正则表达式设计模式

模块23_网络编程&正则表达式&设计模式 文章目录 模块23_网络编程&正则表达式&设计模式第一章.网络编程1.软件结构2.服务器概念3.通信三要素4.UDP协议编程4.1.客户端(发送端)4.2.服务端(接收端) 5.TCP协议编程5.1.编写客户端5.2.编写服务端 6.文件上传6.1.文件上…

网络运维学习笔记(DeepSeek优化版) 024 HCIP-Datacom OSPF域内路由计算

文章目录 OSPF域内路由计算&#xff1a;单区域的路由计算一、OSPF单区域路由计算原理二、1类LSA详解2.1 1类LSA的作用与结构2.2 1类LSA的四种链路类型 三、OSPF路由表生成验证3.1 查看LSDB3.2 查看OSPF路由表3.3 查看全局路由表 四、2类LSA详解4.1 2类LSA的作用与生成条件4.2 2…

如何在 Vue 项目中使用混入(Mixin),它有哪些优缺点?

大白话如何在 Vue 项目中使用混入&#xff08;Mixin&#xff09;&#xff0c;它有哪些优缺点&#xff1f; 什么是 Vue 混入&#xff08;Mixin&#xff09; 在 Vue 项目里&#xff0c;混入&#xff08;Mixin&#xff09;就像是一个装满了各种代码“零件”的百宝箱。你可以把一…

Python----计算机视觉处理(Opencv:图像噪点消除:滤波算法,噪点消除)

一、噪声 噪声&#xff1a;指图像中的一些干扰因素&#xff0c;通常是由图像采集设备、传输信道等因素造成的&#xff0c;表现为图像中随机 的亮度&#xff0c;也可以理解为有那么一些点的像素值与周围的像素值格格不入。常见的噪声类型包括高斯噪声 和椒盐噪声。高斯噪声是一种…

MYSQL基本语法使用

目录 一、mysql之DML 增加语句 删除语句和truncate 更新语句 replace语句 select查询语句 二、select多种用法 查询时的别名使用 分组 分组后的筛选 结果排序 分页功能 分表 多表关联查询 练习题 一、单表查询 二、多表查询 前面已经学习了mysql的安装和基本语…

MySQL数据库精研之旅第四期:解锁库操作高阶技能

专栏&#xff1a;MySQL数据库成长记 个人主页&#xff1a;手握风云 目录 一、查看所有表 1.1. 语法 二、创建表 2.1. 语法 2.2. 示例 2.3. 表在磁盘上对应的⽂件 三、查看表结构 3.1. 语法 3.2. 示例 四、修改表 4.1. 语法 4.2. 示例 五、删除表 5.1. 语法 5.2.…

PETR学习笔记

论文地址&#xff1a;2203.05625 (arxiv.org) 代码地址&#xff1a;megvii-research/PETR: [ECCV2022] PETR: Position Embedding Transformation for Multi-View 3D Object Detection & [ICCV2023] PETRv2: A Unified Framework for 3D Perception from Multi-Camera Imag…