CSS3自定义闪烁动画效果实例

2017年07月26日 00:02:08益点益滴2771

都说HTML5和CSS3的出现直接终结了FLASH时代,不管这其中有没有夸张的成分,但是CSS3的动画功力还真不可小觑。下面我们就分享一下CSS3的自定义闪烁动画实现方法,先定义好动画样式代码:

@-webkit-keyframes twinkling{	/*透明度由0到1*/
	0%{
		opacity:0;				/*透明度为0*/
	}
	100%{
		opacity:1;				/*透明度为1*/
	}
}

实例应用:

<style>
@-webkit-keyframes twinkling{	/*透明度由0到1*/
	0%{
		opacity:0;				/*透明度为0*/
	}
	100%{
		opacity:1;				/*透明度为1*/
	}
}

#element{
	-webkit-animation: twinkling 1s infinite ease-in-out;
}
</style>
<div id="element">闪烁文字</div>

如果需要用jQuery给元素添加动画,JS代码则可以这样写:

$("#element").css({"-webkit-animation":"twinkling 1s infinite ease-in-out"});

注:自定义动画名称为“twinkling”,时间为“1s” ,动画次数为“无限次”,动画效果为“ease-in-out”。

参数说明:

twinkling 1s:闪烁的间隔时间
ease-in-out:闪烁的方式
opacity:透明度

超赞,真给力!嗯,必须鼓励~

打赏0
账号:mxy310@163.com[复制]
账号:77940140[复制]