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

Author : lovecicy

One Direction
使用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的边框属性实现。因为这两个按钮需要在图片中间,所以需要用绝对定位,因此在wrapper外面再套一层<div id="jukebox"></div>。将播放和暂停按钮放在wrapper后面,并设置position为absolute,调整位置到唱片中间,并添加鼠标悬停的样式。
再来添加暂停播放切换效果。先隐藏暂停按钮,为暂停和播放按钮添加事件监听器,点击时互相切换。

3 动画效果实现

这一步才是重点,所以让我们慢慢介绍。先来看看思路:首先,可以用CSS3的animation属性实现转动的效果。这里可以用transform的rotate方法实现。接着,需要实现暂停时停止转动的效果,可以用到animation-play-state这个属性。接下来,让我们看看具体是怎么实现的吧。
首先介绍下CSS3的动画吧,动画涉及到两个CSS3属性:animation和@keyframes。
@keyframes可以让你控制CSS动画序列的中间步骤,在动画序列中声明的关键帧(或者叫做导航点)会在动画的特定时间被完成,这样你就能更好的创建你想要的动画效果。
语法:

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

语法中的block即为一条CSS语句块。
要创建关键帧,你需要在@keyframes后面定义一个动画的名字(identifier),这个名字会在animation中被用到,这个名字用于匹配动画的名字和它对应的关键帧列表。每个@keyframes由多个关键帧组成,每个关键帧又由多个CSS规则组成:

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

同其他CSS规则一样,后面定义的规则会覆盖前面的规则,重名的@keyframes也会覆盖前面的@keyframes。所以,注意,@keyframes不会叠加。
这里我们创建一个叫jukebox的@keyframes,给它定义两个关键帧,一个是from,一个是to。因为我们只需要让唱片在开始时转动0°,在结束时转动360°即可。注意,因为@keyframes还不是稳定的规则,因此需要为@keyframes添加浏览器前缀,于是我们的代码就开始庞大了。
而另一个属性animation,则是所有动画属性的简写,类似于border之于border-left。一下是animation的子属性:

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

这时候,我们为cover添加动画,在CSS中定义如下:
animation: jukebox 10s linear infinite;
第一个jukebox为@keyframes的名字,10s表示完成动画需要的时间,linear表示采用线性函数执行动画,因为我们要让动画保持匀速,infinite则表示动画无限循环。同样的,animation属性也需要添加浏览器前缀。

到这里,这个动画什么效果都没有,因为我们没有在关键帧中指定动画的规则。要让唱片动起来,我们需要使用CSS3的transform属性对唱片进行旋转,用到的方法是rotate。rotate方法接收一个参数,即旋转的角度。所以我们在@keyframes的from中加入transform: rotate(0deg);,在to中加入transform: rotate(360deg);。同样的,transform属性也需要添加浏览器前缀。
现在,唱片终于转起来了~(≧▽≦)/~。
接下来,要完成最后一步了,让唱片在暂停时停止转动,这里用到的是animation-play-state属性。将它的值设置为paused,动画即可在当前状态停止,设置为running则继续当前的动画。
因此,在CSS中添加一个.paused规则,添加animation-play-state: paused;。然后在JS事件处理器中添加增加/删除paused class的语句,好了,大功告成。

standard
  1. luckyGirl - 2014 年 5 月 30 日 3:29 下午

    看不到效果诶,有报错
    Failed to load resource: net::ERR_CONNECTION_ABORTED http://stats.wordpress.com/g.gif?v=wpcom-no-pv&x_notes-menu-impressions=zero-jetpack&baba=0.9885274586267769

    回复
  2. luckyGirl - 2014 年 5 月 30 日 3:32 下午

    哎 又看到了
    不错不错,赞一个

    回复

Have your say