css3元素简单的闪烁效果 (html5 jquery)

本文介绍如何使用CSS3实现闪烁动画效果。通过@-webkit-keyframes定义动画,设置不同时间点的透明度变化,并通过-webkit-animation属性应用到指定元素上。支持此效果的浏览器包括Safari和Chrome。

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

css3 Animation:

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


Jquery :

$(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画

也可以在css样式里添加如下:

#element{

-webkit-animation: twinkling 1s infinite ease-in-out;


}

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

简单吧!其实用css3做动画效果,比用flash,javascript要方便简单多了!希望浏览器赶快都支持css3 Animation .目前webkit内核的浏览器都支持(safrai,chrome)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值