html游戏闪,HTML元素闪烁效果

纯CSS3实现闪烁/* 定义keyframe动画，命名为blink */

@keyframes blink {

0% { opacity: 1; }

50% { opacity: 1; }

50.01% { opacity: 0; } /* 注意这里定义50.01%立刻透明度为0，可以设置闪烁效果 */

100% { opacity: 0; }

}

/* 添加兼容性前缀 */

@-webkit-keyframes blink {

0% { opacity: 1; }

50% { opacity: 1; }

50.01% { opacity: 0; }

100% { opacity: 0; }

}

@-moz-keyframes blink {

0% { opacity: 1; }

50% { opacity: 1; }

50.01% { opacity: 0; }

100% { opacity: 0; }

}

@-ms-keyframes blink {

0% { opacity: 1; }

50% { opacity: 1; }

50.01% { opacity: 0; }

100% { opacity: 0; }

}

@-o-keyframes blink {

0% { opacity: 1; }

50% { opacity: 1; }

50.01% { opacity: 0; }

100% { opacity: 0; }

}

/* 定义blink类 */

i#blink {

animation: blink .75s linear infinite;

/* 其它浏览器兼容性前缀 */

-webkit-animation: blink .75s linear infinite;

-moz-animation: blink .75s linear infinite;

-ms-animation: blink .75s linear infinite;

-o-animation: blink .75s linear infinite;

color: #dd4814;

}

Javascript实现闪烁function show() {

var blink = document.getElementById("blink");

blink.style.visibility = (blink.style.visibility == "visible") ? "hidden" : "visible";

setTimeout('show()', 500);

}

show();