css3文字颜色动态渐变
浏览 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;
}
to {
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数字表达
结合以上三个属性结合动画,最终实现文字渐变的效果。
总结
随着对CSS3越发的了解,深深的感受到CSS3的潜力越来越大,配合css3能够轻松实现各种酷炫效果。当然浏览器兼容
是个大问题。