运用CSS动画，让播放音乐时图片旋转。

大家好，最近博主在写一个音乐页面，突发想到播放音乐的时候让图片旋转是不错的功能，下面我介绍我实现的效果。

首先，先处理css运动。

要想用css写动画，就要先知道动画函数@keyframes定义一个动画。代码如下：

@-webkit-keyframes img {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

-webkit前缀是谷歌浏览器兼容性处理。其中img就是这个动画的名字，这个动画就是让图片旋转360度。接下来就是用到CSS中的动画animation。

.img{
  animation: img 8s linear infinite;
  -moz-animation: img 8s linear infinite;
  -webkit-animation: img 8s linear infinite;
  -o-animation: img 8s linear infinite;
  animation-play-state:paused;
}

参数说明：第一个是定义的函数的名字,8S表示这个动画多久一个循环（就是这个图片旋转360度要多久时间执行完），linear 表示匀速运动，就是保持速度不变运动，infinite表示动画是无限循环执行。 animation-play-state设置动画的运动状态是暂停，待会用一个按钮来让这个图片运动起来。

添加一个运动类样式：

.running{
  animation-play-state:running;
}

大家应该猜到我的思路了，通过点击按钮让图片添加running类样式，来让这个图片旋转。
html的代码我这里不放出来了，应该因个人需求不一样。

我自己遇到的一个问题

下面要说一个我自己做的时候遇到一个问题，就是如果我点击其中一个图片旋转的时候，其他的图片都要保持在最原始的样子 假设我点击其中一个图片运动了15度，这个时候我如果点击其他图片的时候，要将这个图片的15度，变成最开始的0度。这里其实用的是排插方法，就是先全部图片都设置去除img和running样式（为什么要这么做呢，第一，去除样式之后，图片会恢复到原来的0度位置。第二，就是其他点过的图片旋转了角度，如果不去除样式会一直保持这个角度，明显这样看起来就不太好看），然后遍历图片，点哪个就在那个上添加上面的img和running类样式。

最后放一个我自己用上面的CSS代码和自己写的jq做出来的效果图