css拖动音乐进度条,用css3绘制酷狗音乐闪烁的进度条

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

html代码为：

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;

bord