用神奇的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>

效果

左图正常,右图hover时。

3.元素中将会得到/继承元素color值的包括:

  • 元素的文本内容
  • 元素的边框、阴影、背景颜色
  • imgalt
  • 列表项的小黑点
  • hr
  • svg

总之currentColor可以使元素表现出当前元素的颜色,只修改最外层颜色就可以同时改变通过currentColor设置颜色属性的元素。非常方便。

有趣的实例:

Demo

时间: 2024-11-03 03:43:20

用神奇的currentColor制作简洁的颜色动画效果的相关文章

纯CSS3制作卡通场景汽车动画效果

前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越来越多.今天这个分享是PC端的案例,因为我做的是大场景来的,起因还是我无意间看到一张卡通图片.于是我突发灵感,就趁热打铁使用CSS3动画把它按照自己的想法实现了出来.接下来,就让我们一起进入这个好玩的分享吧! 预览 学习一个案例要有热情,就应该先看一下案例的效果,所以,下图为我录的gif图片,大家先

纯html+css制作3D立方体和动画效果

今天放上来的,是一个用css3制作的立方体+动画,效果如下. 整个效果都只用了html和css,没有一句js,其实起初是使用了js来给六个面的小方格们赋值,后来强迫症犯了,直接手动写上吧,这样一句js都没有,更干脆利落点. 如下为body内整体结构,一个类名为big的盒子内,放置六个ul,每个ul赋予不同的类名,标明了ul面所在的位置,这六个ul会作为立方体的六个面. <div class="big"> <ul class="after">&

利用CSS3制作淡入淡出动画效果

CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果. 下面讲解一下如何利用CSS3制作淡入淡出的动画效果.具体实例可参考刚进入本站时的淡入效果. 1. 定义动画,名称为fadeIn @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% {

使用uGUI制作游戏内2D动画

在3D的游戏中制作2D的效果是一个很常见的需求,我在很早前玩过一个叫做艾尔之光的游戏,里面就大量的使用了这个技术.就像下面图片中的伤害数字,这些数字往往还是有一些动画效果在里面的,比如大小的变化,颜色的变化等.在使用NGUI的时候这个东西做起来有点麻烦,因为2D对象在屏幕的位置需要根据游戏内3D对象的位置进行换算.但是在uGUI中,这个问题有了一个非常好的解决方案. 我先把做好的效果图放上来,原谅我不会做gif,其实图中的圆环是个2D的帧动画.它会跟着cube的移动而运动. 对于如何使用图片制作

使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... 使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果.当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时候我们希望翻转一个元素后看到的是另一个元素. 查看演示  插件下载 使用CSS3 backface-vis

在PPT2007中制作礼花绽放动画效果ppt模板打包下载

家家户户都有除夕放烟花的习惯,尤其是一些小地方城市,过节礼花那是必不可少的. 毕业论文ppt背景放礼花可以增添节日的喜庆气氛,但是大家也需要注意自身安全,下面简单介绍一下礼花绽放动画效果的制作. 1.将背景颜色设置为黑色,网上下载礼花图片,先选中下方的上升轨迹线,添加动画--进入-擦除. 2.在自定义窗格中,设置开始:之前. 3.在给下方的上升轨迹线添加效果--退出--淡出. 4.点击速度右侧的小三角下拉箭头,将速度设置为快速. 5.点击下方动作后的三角下拉箭头,选择计时. 6.给淡出效果稍作修

武汉兼职女: 制作h5婚礼邀请函动画总结

武汉兼职女: 制作h5婚礼邀请函动画总结 很多网上的婚纱摄影公司,或者婚庆公司,或者一些h5制作平台,都可以做一些婚礼邀请函,但是这样的婚礼邀请函千篇一律.没有什么特色,仅仅是图片展示.在某人的强烈要求之下,我制作了一个h5婚礼邀请函(目前源码暂时不公开吧,过段时间再说).用到了一些知识和小技巧,在这里简单总结一下! transform 中透视效果应用动画的书写,自然少不了transform ,像translate3d.rotate.scale3d的应用,相信大家都很熟练了.假如不熟练的,可以看

在PHP当中制作隔行换色的效果以及制作上下翻页的效果!

首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> 2 /*tr:nth-child(even){*/ 3 /*background: #cad9ea;*/ 4 /*}*/ 5 </style> 在数据库当中查询第几条开始和我们需要显示的数据只要几条:我们可以用到limin语句,具体代码如下: 1 $sql = "select * f

利用removeChild制作简单的倒序删除效果【jsDEMO】

[功能说明] 利用removeChild制作简单的倒序删除效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in"