【CSS3】---- 纯 css 控制 html5旋转音乐图标，控制背景音乐

@keyframes audio-rotate-360 {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
@-webkit-keyframes audio-rotate-360 {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
.rui-audio-rotate-360{
	animation: audio-rotate-360 2s linear;
	-webkit-animation: audio-rotate-360 2s linear;
}

.rui-audio-rotate-360{
	animation: audio-rotate-360 2s linear infinite;
	-webkit-animation: audio-rotate-360 2s linear infinite;
}

.rui-animation-play-paused{
	animation-play-state:paused;
	-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

<img class="rui-audio-rotate-360" src="./images/music.png" id="music"/>

document.getElementById("music").onclick = function(event){
	if(event.className.indexOf('rui-animation-play-paused') > -1){
		event.className = 'rui-audio-rotate-360';
	} else {
		event.className = 'rui-audio-rotate-360 rui-animation-play-paused';
	}
}

$('.rui-audio-rotate-360').click(function () {
	$(this).toggleClass('rui-animation-play-paused');
})

<img src="./images/music.png" :class="'rui-rotate-360 ' + (isStop ? 'rui-rotate-360-stop' : '')"  
@click="isStop = !isStop" alt=""/>

var app = new Vue({
      el: '#app',
      data:{
        isStop: false
      }
})