在浏览Animate.css官网时，发现Animate.css中这些字母的颜色会慢慢变化。个人觉得还是很有意思的。本来以为是用animate改变颜色，结果F12cssproperties后发现了很多奇怪的东西。来看看我的实现方法吧。简单实现方法h2{height:60px;颜色：#f35626；-webkit-animation:hue6s无限线性;}@-webkit-keyframeshue{from{color:#f35626;}到{颜色：#feab3a;}}通过css3的动画属性可以很方便的改变文字的颜色，但是这里有个小问题，就是动画执行完一轮后，颜色有一个明显的变化过程。因为动画结束后最后一帧的颜色是#feab3a，马上重新执行动画，颜色一开始会是第一帧#f35626，所以会有明显的变化。让我们稍微改变一下动画的编写方式。@-webkit-keyframes色调{0%{颜色：#f35626；}50%{颜色：#feab3a；}100%{颜色：#f35626；}}这样开始和结束是同一种颜色，动画循环的颜色不会发生变异。Animate.css先看Animate的写法h2{height:60px;颜色：#f35626；背景：珊瑚；背景图像：-webkit-linear-gradient(45deg,#f35626,#feab3a);-webkit-背景-剪辑：文本；-webkit-text-fill-color：透明；-webkit-animation:hue6sinfinitelinear;}@-webkit-keyframeshue{from{-webkit-filter:hue-rotate(0deg);}to{-webkit-filter:hue-rotate(-360deg);}}linear-gradient线性渐变，之前用过，但是background-clip,text-fill-color,-webkit-filter:hue-rotate,这些属性感觉好生疏，以后查阅相关资料再详细了解这些属性。让我们逐步了解这些属性。background-cliptext-fill-colorfilter:hue-rotatebackground-clipCSS3属性指定背景的绘图区域W3school只显示三个值CSS3background-clip属性border-box#背景裁剪到边框框。padding-box#背景被裁剪到填充框。content-box#背景被裁剪到内容框。-webkit-background-clip:文本；上面使用的必须加上-webkit-前缀，否则浏览器无法正常渲染。文字的效果是背景色裁剪到文字上，只有文字才会显示背景色。利用该属性可以实现类似于ktv中歌词视图的效果。具体效果参考锐利的background-clip:text实现K歌字幕效果text-fill-colortext-fill-color，表示填充文字颜色。效果和color基本一样，会覆盖color定义的字体颜色。还支持一个透明属性，即透明填充。filter:hue-rotatehue-rotate用于设置物体的色调旋转。用0-360数字来表达，将以上三个属性与动画结合起来，最终实现文字渐变的效果。透明度gradient.maskImage{颜色：红色；高度：600px；//背景：黑色；-webkit-mask-image:-webkit-gradient(linear,centertop,centerbottom,color-stop(0,transparent),color-stop(.3,#000),color-stop(1,#000));}总结随着对CSS3了解的加深，我深深感到CSS3的潜力越来越大。使用CSS3，可以轻松实现各种颜色。很酷的效果。当然浏览器兼容性是个大问题。
