仿百度音乐播放器黑胶唱片效果

Author : lovecicy

使用CSS3实现黑胶唱片机的转动效果,点击暂停按钮停止转动,点击播放按钮继续转动。可以看下面的效果,狂炫酷拽屌炸天有没有? 主要用到的CSS3属性有: – animation – @keyframes – transform: rotate(); – animation-play-state 那么实现的过程是怎么样呢,我先喝口水,慢慢说。 1 HTML结构实现 这一步很简单,先用一个<div id=”cover”></div>包裹一个<img/>元素。为了实现碟片的效果,给<div></div>应用border-radius: 50%;,同时设置overflow: hidden,防止图片超出。为了方便起见,在cover外包一层<div id=”wrapper”></div>。这样,第一步就完成了,这时候应该可以看到一个原型的唱片了。 2 实现播放和暂停按钮 这里,我没有用图片或者字体,而是使用了CSS的边框属性实现。因为这两个按钮需要在图片中间,所以需要用[Read More]

standard