直播動效按鈕的製做

時間 2020-11-26

標籤 html web 性能測試網站 url spa code orm htm 欄目 HTML 简体版

原文原文鏈接

今天，在別人的網站恰好看到一個特效，正是本身想要的，html

就保存了一份下來到博客，方便本身能夠查詢。web

鼠標放上後性能

效果還不錯，主要是後面那個動圖，一直在動。用的是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>