浏览 Animate.css官网 的时候发现Animate.css这几个字母的颜色会慢慢变化，个人觉得还是很有意思，本以为是利用animate 改变color,结果F12后发现好多奇怪的css属性。
先来看看我的实现方法
简易实现方法
h2{
height: 60px;
color: #f35626;
-webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
from {
color: #f35626;
}
to {
color: #feab3a;
}
}通过通过css3的动画属性可以轻松改变文字的颜色，但是这里有一个小问题，就是动画执行一个轮回结束后，颜色有一个明显变化过程。是因为动画的结束后的最后一帧的颜色为#feab3a，立马会重新执行动画，颜色会初始到第一帧#f35626，所以会有明显的变化。我们稍微改变一下动画的写法。
@-webkit-keyframes hue {
0%{
color: #f35626;
}
50% {
color: #feab3a;
}
100%{
color: #f35626;
}
}这样开始和结束都是同样的颜色，动画轮回颜色就不会突变了。
Animate.css写法
先看看Animate的写法
h2{
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);
}
}linear-gradient线性渐变，以前是用到过，但是background-clip, text-fill-color, -webkit-filter: hue-rotate,这些属性感觉好陌生，查阅相关资料后才进一步认识这些属性，下面一步步来了解这些属性吧。
- background-clip
- text-fill-color
- filter: hue-rotate
background-clip
CSS3 属性 规定背景的绘制区域 W3school上面只展示了三个值 CSS3 background-clip 属性
border-box # 背景被裁剪到边框盒。
padding-box # 背景被裁剪到内边距框。
content-box # 背景被裁剪到内容框。上面用到的-webkit-background-clip: text; 必须加上-webkit-前缀，不然浏览器不能正常渲染。text的效果就是背景颜色被剪裁到文字上面，只有文字会显示背景颜色。这个属性可以做类似ktv里面歌词视图的效果。具体效果参考 犀利的background-clip:text，实现K歌字幕效果
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));
}总结
随着对CSS3越发的了解，深深的感受到CSS3的潜力越来越大，配合css3能够轻松实现各种酷炫效果。当然浏览器兼容是个大问题。