用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)
})

演示：

音乐进度条