Day 01 纯CSS实现文字颜色渐变动画 | 8月更文挑战

天大地大老婆最大
2,712 阅读2分钟
在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现文字颜色渐变动画。下面就介绍中实现方式供大家参考！

image.png

实现这个小案例，我们需要：

1、文字渐变

2、动画

1、文字渐变的实现方法

这里引用的是知乎上一个3种css方法实现方法，我自己使用的是第一种，文章参考：去看看

方法一

主要是使用 background-cli、 text-fill-color属性

缺点：webkit 内核浏览器特有

.gradient-text-one{
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
css属性说明
background-image: -webkit-linear-gradient为文本元素提供渐变背景
-webkit-text-fill-color: transparent使用透明颜色填充文本
-webkit-background-clip: text用文本剪辑背景，用渐变背景作为颜色填充文本
<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
     <title>渐变色</title>
     <style>
         .box {
         position: relative;
         text-align: left;
         text-indent:30px;
         line-height: 50px;
         font-size: 40px;
         font-weight: bolder;
         background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow); 
         -webkit-background-clip: text; 
         -webkit-text-fill-color: transparent; 
         }
     </style>
    </head>
    <body>
         <div>
         Hello World ~
         </div>
    </body>
</html>
方法二

使用：mask-image

缺点：webkit 内核浏览器特有

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>渐变色</title>
        <style>
    .box { position: relative; text-align: left;
        text-indent:30px;
        line-height: 50px; font-size: 40px;
        font-weight: bolder;
        color: red;
        -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); }
        </style>
    </head>
    <body>
    <div> Hello World ~ </div>
    </body>
    </html>
方法三

采用 svg 方式

<html>
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style>
.box-text { fill: url(#SVGID_1_);
font-size: 40px;
font-weight: bolder; }
</style>
</head>
<body>
    <svg viewBoxs="0 0 500 300">
        <defs>
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop offset="0" style="stop-color: yellow"/> <stop offset="0.5" style="stop-color: #fd8403"/>
            <stop offset="1" style="stop-color: red"/>
            </linearGradient>
        </defs>
        <text text-anchor="middle" x="110px" y="30%">Hello World ~ </text>
    </svg>
</body>

2、css变量var

var() 函数用于插入 CSS 变量的值

变量需要提前声明一下：变量名称必须以两个破折号（--）开头，且区分大小写！

    :root {
          --gradient: linear-gradient(to right, red, orange, yellow,green, cyan, blue, purple);
        }
    .text {
        background-image: var(--gradient);
    }

3、背景剪裁

background-clip：规定背景绘制的区域，比如边框及以内，或者padding及以内，或者内容区域

常用属性值：border-box/padding-box/content-box

不常用属性值：text，属于测试版本，有兼容问题，需要给属性名前面加浏览器前缀。

text 功能：是在元素内部书写的文字区域添加背景。

如果是渐变做的背景图，一倍图下，改变位置没用。

4、CSS3 动画

需要两个属性完成

@keyframes 规则：决定在运动时间轴上，每个时间点改变的 css 属性的状态。

/* 定义动画规则 */
    @keyframes move {
      from {
        left: 0;
      }
      to {
        left: 500px;
      }
    }

animation 属性：调用某个特定的运动规则，让设置的元素进行运动。

.box {
      // 执行规定的动画
    // 属性值： 动画名称 每次运动的时间 运动速度曲线 运动次数
      animation: move 2s ease infinite;
    }

5、伪类选择器

input:checked :只有表单元素被选中才能触发选中状态，这个选择器才生效，选择的是表单元素

el1 ~ el2：选择 el1 后面的兄弟 el2.

.btn:checked ~ .text {
      animation: positionChange 2s linear infinite;
    }

完整code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    :root {
      --gradient: linear-gradient(to right, 
      purple,
      red, orange, yellow,green, cyan, blue, purple,
      red, orange, yellow,green, cyan, blue, purple
      );
    }
    body {
      
    }
    .wrapper {
      width: 800px;
      /* 让块级元素水平居中 */
      margin: 100px auto;
    }
    .text {
      /* 使用背景图做渐变 */
      background: var(--gradient);
      background-size: 200%;
      /* 背景图默认重复进行加载的 */
      /* 背景图运动改的是背景位置 */
      /* background-position: 50% 0; */
      /* 剪裁背景，只显示文字区域 */
      background-clip: text;
      /* */
      -webkit-background-clip: text;
      font-family: "Arial Black";
      font-size: 80px;
      /* 让文字颜色透明，不要压盖背景 */
      color: transparent;
    }
    /* 表单被选中后，兄弟 p 运动 */
    .btn:checked ~ .text {
      animation: positionChange 2s linear infinite;
    }
    /* .btn:checked ~ label {
      background-color: #f00;
    } */
    .box {
      position: relative;
      left: 0; 
      width: 100px;
      height: 100px;
      border: 10px dashed #f00;
      background-clip: padding-box;
      background-image: linear-gradient(to right,red, orange 40%, pink);
      animation: move 2s ease infinite;
    }
    /* 定义动画规则 */
    @keyframes move {
      from {
        left: 0;
      }
      to {
        left: 500px;
      }
    }
    /* 定义文字背景位置改变的动画规则 */
    @keyframes positionChange {
      0% {
        background-position-x: 0%;
      }
      100% {
        background-position-x: 100%;
      }
      /* 注释快捷键 Ctrl+/ */
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <input type="checkbox" id="button" class="btn">
    <label for="button">Animate it!</label>
    <p class="text">Hello world</p>
  </div>
  <!-- <div class="box"></div> -->
</body>
</html>
avatar
文章
阅读
粉丝