今天来整一个超简单的教程。【才不是小鱼缸素材】
大概思路:
设置一个彩色渐变背景,将文字设置成透明,使背景仅在文字上显示,形成彩色文字。
再添加动画使其呈现动态效果。
开整!
效果图:
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重新编辑 ]