当前位置: 秋叶网络博客 前端编程 ◊ 用css3绘制酷狗音乐闪烁的进度条

用css3绘制酷狗音乐闪烁的进度条

作者:秋了秋 发表时间:2015年09月14日

看了看酷狗音乐播放器的界面,里面的哪个进度条的圆头一闪一闪的,具有良好的用户体验性,于是就用css绘制了一个,感觉还不错,可以广泛用于html5播放器上。 html代码为:

<div class="dise">
<div class="jindu"><div class="nowat"><i></i></div></div>
</div>

css代码为:

.dise{overflow:hidden;background:#fff;background:rgb(95,157,207);}
.jindu{width:600px;margin:50px;height:3px;border:1px solid #6F6C6C;background:rgb(170,191,207);}
.nowat{height:100%;width:5%;background:#fff;position:relative;}
@-webkit-keyframes qiuye{0%{-webkit-box-shadow: 0 0 20px #fff;}25%{-webkit-box-shadow: 0 0 10px #fff;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 10px #fff;}100%{-webkit-box-shadow: 0 0 20px #fff;}}
@keyframes qiuye{0%{-webkit-box-shadow: 0 0 10px #363333;}25%{-webkit-box-shadow: 0 0 7px #363333;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 6px #fff;}100%{-webkit-box-shadow: 0 0 10px #363333;}}
.nowat i{
width:8px;
height:8px;
border-radius:50%;
background:#fff;
position:absolute;
right:-4px;
top:-3px;
-webkit-box-shadow: 0 0 20px #fff;
-moz-animation: qiuye 3s linear 2s infinite;
-webkit-animation: qiuye 3s linear 2s infinite;
-o-animation: qiuye 3s linear 2s infinite;
-ms-animation: qiuye 3s linear 2s infinite;}
</style>

jq代码为:

$(function(){
function zouba(){
var kugou=$(".nowat").width(),jindu=$(".jindu").width()
kugou++
if(kugou>jindu){kugou=0;}$(".nowat").css("width",kugou+"px");
}
setInterval(zouba,1000)
})

演示:

音乐进度条

code代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

2
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/390.html
目录: 前端编程 | 标签: 酷狗进度条 | 7792次阅读