用神奇的currentColor制作简洁的颜色动画效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先上一个兼容性总结图：老版本ie可以直接用复杂方法了，套用某表情包的话：

2016年了，做前端你还考虑兼容IE6？你这简直是自暴自弃！

好了，知道了兼容性，我们可以放心的使用了。

在CSS3中扩展了颜色值包含 currentColor 关键字，相当于元素color属性的计算值，让没有默认继承的子元素或者颜色属性可以继承。

用于所有接受颜色的属性上，相当于 color: inherit。

如：background，可以设置background：currentColor，这样背景颜色就和页面当前的颜色一样了，background设置成inherit时，并不会使用当前颜色。

<div class="center">
<div class="center_text">
我是文字文字文字
</div>
</div>

.center_text{
border: 1px solid;
background: currentColor;
background-image: linear-gradient(to right, #fff, currentColor 100%);
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
.center{
color:#000;
}

当外层div设置颜色是#000时，显示如左图，当只把其颜色改成#bb1515时，会显示右侧。而渐变色是没有inherit的，这里我们可以使用currentColor，这样当我们想要换主题的时候，只要修改外层颜色即可。

这种情况还以用在hover的时候，设置：

.center:hover{
color: #bb5515;
}

当鼠标hover在上面的时候，这里我们只需要控制最外层的颜色就行。

用这个属性可以方便简洁的实现很多美腻的效果。

1.用在伪元素上。

.center_text:after{
content:'';
width: 20px;
height: 20px;
display: inline-block;
background: currentColor;
vertical-align: middle;}

效果

左图正常，右图hover时。

2.<hr>

代码：

.center{
color: #000;
}
.center:hover{
color: #bb5515;
}
.center_text{
border: 1px solid;
width: 400px;
height: 200px;
text-align: center;
}
.center_text hr{
background: currentColor;
height: 1px;
border:none;
}

<div class="center">
<div class="center_text">
<p>在CSS3中扩展了颜色值包含 currentColor 关键字，相当于元素color属性的计算值，让没有默认继承的子元素或者颜色属性可以继承。用于所有接受颜色的属性上，相当于 color: inherit。</p>
<hr />
<p>如：background，可以设置background：currentColor，这样背景颜色就和页面当前的颜色一样了，background设置成inherit时，并不会使用当前颜色。</p>
</div>
</div>

效果