抄自网络,来源忘了。
原来CSS3如此牛逼…
1 2 3 4 5 6 7 8 9 10 11 12 |
@-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/ } } #element{ -webkit-animation: twinkling 1s infinite ease-in-out; } |
需要闪烁的元素的id是“element”。
当然,如果用jquery给元素加css,就像下面这样:
1 |
$("#element").css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); |
注:动画名称为“twinkling”,时间为“1s” ,动画次数为“无限次”,动画效果为“ease-in-out”。
上面的参数稍微说明一下:
twinkling 1s:闪烁的间隔时间
ease-in-out:闪烁的方式
opacity:透明度