如何实现CSS字体渐变和字体颜色随时间来回变动

前言：CSS代表层叠样式表（Cascading Style Sheets），是一种用于定义网页外观和样式的语言。通过CSS，网页开发人员可以指定如何呈现HTML元素，包括颜色、字体、大小、布局和其他视觉属性；简单理解就是，css是给hmtl元素设置样式，通过css修饰网页，就像‘人靠衣装马靠鞍，html也要靠css才能打扮的好看’

一、字体的渐变

要使字体颜色渐变，就要在css中为字体添加渐变属性

关键属性

-webkit-background-clip

-webkit-text-fill-color

还有一个linear-gradient()函数来创建渐变。

解释一下，-webkit是一种渲染引擎，用于指示当前规则适用于Webkit引擎（例如Google Chrome（谷歌）和Safari浏览器）..

例子如下：

  .gradient-text {
                background: linear-gradient(to right, #f00, #00f);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

 <p class="gradient-text">这段文字将会有渐变效果。</p>

效果

二、字体随时间来回变动

要实现CSS字体颜色随时间来回变动，可以使用CSS3中的@keyframes规则和animation属性。

关键字

animation属性，用于要改变字体的颜色的元素

注意：

@keyframes规则和animation属性

animation-name属性必须与@keyframes规则中定义的动画名称相匹配。如果指定的名称不存在，则不会产生任何动画效果。打个比方，我keyframes定义了名为Love 那么adimation-name后面就必须是Love;adimation-name:Love

 @keyframes color-change {
     0% {color: red;}
     50% {color: green;}
     100% {color: red;}
}
  h1 {
      animation-name: color-change;
      animation-duration: 5s;
      animation-iteration-count: infinite;
}

<h1>我太帅了</h1>

总结：字体随时间变动的视频效果就不上传了，大家可以c+v去测试一下