运⽤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表⽰动画是⽆限循环执⾏。 a
nimation-play-state设置动画的运动状态是暂停，待会⽤⼀个按钮来让这个图⽚运动起来。
添加⼀个运动类样式：
.running{
好看的css代码animation-play-state:running;
}
⼤家应该猜到我的思路了，通过点击按钮让图⽚添加running类样式，来让这个图⽚旋转。
html的代码我这⾥不放出来了，应该因个⼈需求不⼀样。
我⾃⼰遇到的⼀个问题
下⾯要说⼀个我⾃⼰做的时候遇到⼀个问题，就是如果我点击其中⼀个图⽚旋转的时候，其他的图⽚都要保持在最原始的样⼦ 假设我点击其中⼀个图⽚运动了15度，这个时候我如果点击其他图⽚的时候，要将这个图⽚的15度，变成最开始的0度。这⾥其实⽤的是排插⽅法，就是先全部图⽚都设置去除img和running样式（为什么要这么做呢，第⼀，去除样式之后，图⽚会恢复到原来的0度位置。第⼆，
就是其他点过的图⽚旋转了⾓度，如果不去除样式会⼀直保持这个⾓度，明显这样看起来就不太好看），然后遍历图⽚，点哪个就在那个上添加上⾯的img和running类样式。
最后放⼀个我⾃⼰⽤上⾯的CSS代码和⾃⼰写的jq做出来的效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。