今天，在别人的网站刚好看到一个特效，正是自己想要的，
就保存了一份下来到博客，方便自己可以查询。
鼠标放上后
效果还不错，主要是后面那个动图，一直在动。用的是CSS3的一个性能。
原代码如下：（以下是测试代码，捡自己需要的用就行）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .info_live_tit a{display: inline-block;width: 126px;height: 24px;padding: 5px 0;margin: 0 20px;background: url(http://www.zgjsks.com/statics/images/2019images/info_live_titbg.png) center 0 no-repeat;font:normal 18px/24px 'Microsoft Yahei';color: #fff;text-align: center;letter-spacing: 1px;} .info_live_tit a:hover,.info_live_tit a.on{background-position: center -34px;color: #fff;} .info_live_tit a span{display: inline-block;width: 106px;padding-right: 20px;height: 24px;background: url(http://www.zgjsks.com/statics/images/2019images/live_h_spanbg.png) 98px 0 no-repeat; -webkit-animation:live .8s steps(11) infinite; -moz-animation:live .8s steps(11) infinite; -ms-animation:live .8s steps(11) infinite; -o-animation:live .8s steps(11) infinite; animation:live .8s steps(11) infinite; } @-webkit-keyframes live{ 0%{background-position:98px 0;} 100%{background-position:98px -264px;} } @-moz-keyframes live{ 0%{background-position:98px 0;} 100%{background-position:98px -264px;} } @-ms-keyframes live{ 0%{background-position:98px 0;} 100%{background-position:98px -264px;} } @-o-keyframes live{ 0%{background-position:98px 0;} 100%{background-position:98px -264px;} } @keyframes live{ 0%{background-position:98px 0;} 100%{background-position:98px -264px;} } </style> <body> <div class="info_live_tit"> <a href=""><span>正在直播</span></a> </div> </body> </html>
用到的图片：
这上面还有一个透明的图是动效的关键哦。
好了就到这了。开始用吧。
