<div id="container">
这里查看“<span class="blink">闪烁效果</span>”,ENjoy!
</div>
/* 定义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类*/ .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; }