CSS3_01：玩转文字渐变特效动画，这篇文章满足你，实现方式+案例完整源码

news2024/10/5 15:23:15

这里后面会陆续出一个关于css动画系列文章，关注布衣前端，实时获取。

在前端开发过程中，有时候需要特别显示页面某个文字特效，这时普通的文字颜色或者阴影已经无法满足需求。此时，css的线性渐变就派上用场了。

文字渐变用到的css技术栈

linear-gradient(0deg, #00DFA2 25%, #F6FA70);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 2px 0.1rem #fff);
animation: variation 5s cubic-bezier(0.87, 0, 0.13, 1) infinite

最终效果动态图片
在这里插入图片描述
仔细看，一共五行文字，第一行是普通文字没加任何特效，第二行时线性渐变的角度补间动画效果，从0deg到330deg，顺时针方向的效果，当然可以改成逆时针，呈现另一种效果。最后一行文字是利用盒子背景中心位置产生的特效。

文字渐变原理

第二行文字特效实现方式：定义一个普通的盒子，这里是li标签，里面增加文字，增加filter模糊和设置元素背景background-clip，将文本填充元素背景，设置文本填充颜色为透明，再加上文字间距，背景background配置上线性渐变linear-gradient，至少两种颜色，此时文字渐变效果就完成了，动画部分可选。

css代码

.gradient-text {
    background: linear-gradient(0deg, #00DFA2 25%, #F6FA70);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 64px;
    font-weight: bold;
    letter-spacing: -.5px;
    filter: drop-shadow(2px 2px 0.1rem #fff);
    animation: variation 5s cubic-bezier(0.87, 0, 0.13, 1) infinite;
}

/* 文字渐变补间动画 */
@keyframes variation {
  from {
    background: linear-gradient(0deg, #00DFA2 25%, #F6FA70);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  to {
    background: linear-gradient(330deg, #00DFA2 25%, #F6FA70);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

注意：这里进行补间动画时，需要写填充元素背景方式，否则不生效。

HTML代码

<ul>
  <li class="gradient-text">欢迎关注</li>
</ul>

附案例全部源码

这里的源码，关于所有线性渐变颜色、角度、颜色占比和动画方式都是可以调节的，打开脑洞，创作无限可能的文字特效。这里起到抛砖引玉作用，不是唯一效果。

感兴趣的小伙伴，可以把源码复制到html文件，用浏览器打开，看看本地效果，还可以自己f12进行调整样式，颜色等等。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文字渐变效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        justify-content: center;
        background-color: #151515;
      }
      li {
        list-style: none;
      }
      
      .text-normal, 
      .gradient-text,
      .gradient-text-up,
      .gradient-text-half,
      .gradient-text-bias {
        font-size: 64px;
        color: #B4A5A5;
        font-weight: bold;
      }
      .gradient-text {
          background: linear-gradient(0deg, #00DFA2 25%, #F6FA70);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          letter-spacing: -.5px;
        filter: drop-shadow(2px 2px 0.1rem #fff);
        animation: variation 5s cubic-bezier(0.87, 0, 0.13, 1) infinite;
      }
      /* 文字渐变补间动画 */
      @keyframes variation {
        from {
          background: linear-gradient(0deg, #00DFA2 25%, #F6FA70);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        to {
          background: linear-gradient(330deg, #00DFA2 25%, #F6FA70);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      /* 渐变各占一半 */
      .gradient-text-half {
        background: linear-gradient(0deg, #14FFEC 50%, #F6C90E 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -.5px;
      }
      /* 斜边各占一半 */
      .gradient-text-bias {
        background: linear-gradient(347deg, #F6C90E 50%, #14FFEC 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -.5px;
      }
      .gradient-text-up {
          background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-size: 400% 400%;
          letter-spacing: -0.5px;
          animation: gradientText 20s cubic-bezier(0.32, 0, 0.67, 0) infinite;
      }
      @keyframes gradientText {
          0% {
              background-position: 200% 100%;
          }
          50% {
              background-position: -200% 100%;
          }
          100% {
              background-position: 0% -200%;
          }
      }
</style>
  </head>
  <body>
    <ul>
      <li class="text-normal">普通文字</li>
      <li class="gradient-text">欢迎文字</li>
      <li class="gradient-text-half">布衣前端</li>
      <li class="gradient-text-bias">布衣前端</li>
      <li class="gradient-text-up">布衣前端</li>
    </ul>
  </body>
</html>