[家长里短] 超简单的动态渐变文字教程

今天来整一个超简单的教程。【才不是小鱼缸素材】


大概思路：
设置一个彩色渐变背景，将文字设置成透明，使背景仅在文字上显示，形成彩色文字。
再添加动画使其呈现动态效果。

开整！
效果图：https://m.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>

“这里的文字要显示成动态的渐变文字效果”就呈现动态效果了。

用这个当小鱼缸的素材可以写好多
我真是太机智了！


是不是很简单！！
交个作业不过分吧！！！
大声告诉我，这个不难！

有问题可以私信