css3模仿airplay播放器界面

今天给大家介绍个极小巧的绿色音乐播放器AirPlay,该播放器大小不到1M,界面华丽功能强大,无论在 XP 还是 Windows7 下都能显示华丽的半透明玻璃特效,另外还支持歌词、专辑图片下载,读取压缩文件等功能,可以说麻雀虽小,五脏俱全,是我见过的最好的音乐播放器!
我用这款播放器已经有一年多了,没有更新过,百看不厌。某天我同事说这个界面能做成网页形式也挺好的,乘空余时间,我用html5和css3模仿了它的界面。
这里用到了css3的圆角、背景渐变、阴影、动画等效果,仅兼容firefox 3.6+和chrome 10+。可以参考我以前的文章css3新增的五个属性
chrome10以下的渐变写法比较繁琐我就没写了,感兴趣话的可以参考下面给出的资料。

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

下面给出airplay官网地址,喜欢的话下载去吧:-P:http://www.podez.com/zion.php
新版地址:http://www.podez.com/index.html

参考资料:
背景渐变(CSS3 Gradient Backgrounds):http://css-tricks.com/examples/CSS3Gradient/
动画效果:http://www.w3schools.com/css3/css3_transitions.asp
CSS Border使用小分享:http://ued.taobao.com/blog/2010/08/04/css-border使用小分享/

发表评论

电子邮件地址不会被公开。 必填项已用*标注