直播动效按钮的制作

今天，在别人的网站刚好看到一个特效，正是自己想要的，

就保存了一份下来到博客，方便自己可以查询。

 

 

 鼠标放上后

 

 

效果还不错，主要是后面那个动图，一直在动。用的是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>

 

用到的图片：

这上面还有一个透明的图是动效的关键哦。

好了就到这了。开始用吧。

 

 

 

 

 

 

posted @ 2020-05-18 17:04  鳳舞九天  阅读(843)  评论(0)  编辑  收藏  举报