今天来整一个超简单的教程。【才不是小鱼缸素材】
大概思路：
设置一个彩色渐变背景，将文字设置成透明，使背景仅在文字上显示，形成彩色文字。
再添加动画使其呈现动态效果。
开整！
效果图：
https://www.paipai.fm/r7856628
第一步：首先设置语法规则
1.创建渐变色背景
background-image: linear-gradient(
to right,#95b294,#87c089,#618f6a,#fec3b1,#e5795f,#92b8c3,#4a778e);
#渐变颜色从左到右，7个色号【颜色和多少都可以改】
ps:冒号后面的就是属性值，这些值是可以自己改的，可以设置方向，角度，透明度，颜色，多个颜色等等
2.将文字设置成透明
color: transparent;
width: fit-content;
# 设置文本颜色为透明，是为了让渐变背景显示在文本颜色上面。
# 会根据内容的大小自动调整
3.-webkit-background-clip: text;
#背景仅被绘制到文本上
以上就已经形成彩色文字了。
第二步：添加动画效果。
1.设置动画
@keyframes dt {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
# 定义了一个背景图像沿着水平方向移动的动画,这个动画名字是dt。
2.应用这个动画
animation: dt 6s linear infinite;
animation-direction: alternate;
# 该动画在6秒内匀速执行，再反向运行;循环。
# 这些属性值都可以改，搜animation css能了解更多。
# 6s这个时间，越小就是动画越快，越大就是动画越慢
第三步：怎么应用？
将下面这段文字设置成动态效果。
<p id='sz'>这里的文字要显示成动态的渐变文字效果</p>
设置id= 'sz' ，这个id的值一定是唯一的。【可设置成其他文本】
要知道是哪段文字设置效果，首先要选中这段，通过选择器【#sz】就能选中上面这段句子。
这里是<p>，但<td>和<div>是一样的。
ps：此处就是css的语法规则。感兴趣的大家可以去搜一搜。
第四步：汇总所有代码！😎
#注意
font-size: 20px;
font-weight: 800;
上面这2行是设置字体大小和粗细，完全是为了体现效果
重点！！！其实就是套用下面这段代码！！！！
直接复制！把p里的文字换成你想写的内容！
就完事了
将所有代码汇总一起,这段代码
<p id="sz">这里的文字要显示成动态的渐变文字效果</p>
<style type="text/css">
#sz {
font-size: 20px;
font-weight: 800;
width: fit-content;
background-image: linear-gradient(
to right,#95b294,#87c089,#618f6a,#fec3b1,#e5795f,#92b8c3,#4a778e);
color: transparent;
-webkit-background-clip: text;
background-size: 300% 100%;
animation: dt 6s linear infinite;
animation-direction: alternate;
}
@keyframes dt {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
</style>
“这里的文字要显示成动态的渐变文字效果”就呈现动态效果了。
用这个当小鱼缸的素材可以写好多
我真是太机智了！
是不是很简单！！
交个作业不过分吧！！！
大声告诉我，这个不难！
有问题可以私信
[ 此帖被裴之在2024-05-28 12:16重新编辑 ]
