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

这里后面会陆续出一个关于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

最终效果动态图片
CSS3_01:玩转文字渐变特效动画,这篇文章满足你,实现方式+案例完整源码_第1张图片
仔细看,一共五行文字,第一行是普通文字没加任何特效,第二行时线性渐变的角度补间动画效果,从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>

小伙伴们有不明白的地方,评论区见。更多前端文章资源,藏于 布衣前端 vx gongzhonghao

你可能感兴趣的:(CSS系列,css3,css,前端)