今天，在別人的網站剛好看到一個特效，正是自己想要的，
就保存了一份下來到博客，方便自己可以查詢。
鼠標放上后
效果還不錯，主要是后面那個動圖，一直在動。用的是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>
用到的圖片：
這上面還有一個透明的圖是動效的關鍵哦。
好了就到這了。開始用吧。
