css3文字颜色动态渐变

浏览 Animate.css官网的时候发现Animate.css这几个字母和按钮的颜色会慢慢变化，看着挺喜欢的，F12查看了它的实现方法。

青于蓝尔胜于蓝，Hello、我是渐变演示

Animate.css写法

h3{
    height: 60px;
    color: #f35626;
    background: coral;
    background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

属性解释：

background-clip
text-fill-color
filter: hue-rotate

background-clip

CSS3 属性规定背景的绘制区域 W3school上面只展示了三个值 CSS3 background-clip 属性

text-fill-color

text-fill-color,表示文字颜色填充，实现的效果基本上与color一样，会覆盖color所定义的字体颜色.也支持一个transparent属性，也就是透明填充。

filter: hue-rotate

hue-rotate用来设置对象的色相旋转。用0-360数字表达

扩展-透明度渐变

.maskImage {
  color: red;
  height: 600px;
  //background: black;
  -webkit-mask-image: -webkit-gradient(linear,center top,center bottom,color-stop(0,transparent),color-stop(.3,#000),color-stop(1,#000));
  }

参考网址： https://segmentfault.com/a/1190000012232342?utm_source=tag-newest
Animate.css： https://daneden.github.io/animate.css/