CSS3元素闪烁效果

最新推荐文章于 2025-06-20 10:00:22 发布

dxh_0829

最新推荐文章于 2025-06-20 10:00:22 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： XHTML+CSS

本文链接：https://blog.youkuaiyun.com/huileiforever/article/details/28683247

XHTML+CSS 专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何使用CSS动画实现网页元素的闪烁效果，并通过@keyframes定义动画过程，包括透明度的变化。同时展示了如何利用jQuery来设置CSS动画属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@-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：透明度