【CSS文字渐变动画】

server/2025/3/24 13:58:09/

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/server/176896.html

相关文章

施磊老师c++(八)

语法 是 很不重要的, 基本的回会了就行了 cpp 面经 文章目录 cpp 面经1.程序的内存布局?--可以详看施磊老师第一节课2.堆栈区别3.函数调用参数是怎么传递的?4.为什么函数调用从右往左压栈5.函数题6.类和结构体的内存对齐----空结构体 1.程序的内存布局?–可以详看施磊老师第…

豪越科技消防一体化:数字中国智慧应急的关键支撑

在数字中国建设加速推进的当下&#xff0c;国家数据局对 2025 数字中国任务的部署&#xff0c;为各领域数字化转型指明了方向。其中&#xff0c;智慧应急作为保障城市安全运行的重要环节&#xff0c;备受关注。豪越科技消防一体化安全管控解决方案&#xff0c;凭借其先进的理念…

CSS3-2D转换、动画、3D转换详解

一、CSS3 2D转换 CSS3的2D转换允许对HTML元素进行移动、旋转、缩放、倾斜等操作&#xff0c;无需使用图片即可实现丰富的视觉效果。通过transform属性实现 1. 二维坐标系 移动盒子的位置&#xff1a; 定位 盒子的外边距 2d转换移动 2D转换是改变标签在二维平面上的位置和…

基于腾讯云HAI-CPU一体化部署DeepSeek打造AI烹饪助手应用

一、智慧图书馆建设背景与需求 &#xff08;一&#xff09;智慧图书馆建设的时代背景 在信息技术日新月异的大背景下&#xff0c;数字化浪潮以汹涌之势席卷了各个领域&#xff0c;图书馆作为信息资源的重要集散地&#xff0c;也迎来了前所未有的变革。随着社会对知识和信息需…

从需求到智能管理:用 AntSK 和 DeepSeek-R1 打造企业级知识库与测试用例生成系统

在企业数字化转型的浪潮中&#xff0c;知识管理与测试用例生成正逐渐成为核心竞争力。如何高效地将需求文档转化为可操作的用例&#xff0c;并构建一个方便检索、管理和扩展的知识库&#xff0c;是每个技术团队面临的难题。而 AntSK 工具结合国产大语言模型 DeepSeek-R1&#x…

让“树和二叉树”埋在记忆土壤中--性质和概念

Nice to meet your! 目录 树的介绍&#xff1a; 树的创建&#xff1a; 二叉树的概念和结构&#xff1a; 二叉树的存储结构&#xff1a; 树的介绍&#xff1a; 概念和结构&#xff1a; 不知你们是否在现实中看见过分为两个叉的枯树&#xff0c;大概长这样&#xff1a; 那…

关于深度学习的梯度下降法介绍

目录 内容提要 1. 梯度是什么&#xff1f; 2. 怎么个下降法&#xff1f; 3. 潜在的问题 4. 陷入局部最小 5. 遭遇鞍点 6. 学习率的选择 总结 内容提要 梯度下降法是机器学习中用于优化模型参数的核心算法之一 在训练神经网络时扮演着至关重要的角色 掌握这一“黑魔法…

python_巨潮年报pdf下载

目录 前置&#xff1a; 步骤&#xff1a; step one: pip安装必要包&#xff0c;获取年报url列表 step two: 将查看url列表转换为pdf url step three: 多进程下载pdf 前置&#xff1a; 1 了解一些股票的基本面需要看历年年报&#xff0c;在巨潮一个个下载比较费时间&…