CSS3元素闪烁效果

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



要闪烁的元素的id是“element”。

当然,如果用jquery给元素加css,就像下面这样:

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

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

上面的参数稍微说明一下:

twinkling 1s:闪烁的间隔时间

0.9s: 延迟时间

alternate:是否应该轮流反向播放动画。
ease-in-out:闪烁的方式
opacity:透明度

发布了74 篇原创文章 · 获赞 43 · 访问量 24万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章