colorizer是一款可以创建黑胶唱片风格音频播放器的jQuery插件。该插件通过jQuery来驱动音频的播放,并使用CSS3来制作唱片机的动画特效。
使用方法
在页面中引入jquery和colorizer.js文件。
HTML结构
使用下面的HTML结构来构建一个唱片机播放器。
CSS样式
为唱片机使用下面的CSS样式。
body,ul,li{
margin: 0;
padding: 0;
}
body{
background: #333;
}
div.audio{
position: relative;
top: 100px;
left: 100px;
background: #eee;
width: 400px;
height: 400px;
transition: all 0.3s;
box-shadow: 33px 24px 10px 0 rgba(0, 0, 0, 0.2);
}
div.colorizer{
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 400px;
transition: all 0.3s;
z-index:3;
}
div.echol