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

1. 效果展示

2. 效果分析

1. 开始音乐图标就360度自动无限旋转；
2. 点击图标停止旋转，再次点击继续无限旋转。

3. 实现思路

1. 实现360°旋转

animation-timing-function 属性：linear 匀速旋转

@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;
}

2. 无限旋转

animation-iteration-count 属性：指定动画应该播放次数【infinite无限次（永远）】

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

3. 停止动画

animation-play-state 属性：暂停动画

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

4. 实现className的切换

1. JS 实现播放和暂停的切换

HTML

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

JS

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';
	}
}

2. JQUERY 实现

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

3. VUE 实现

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

JS

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

5. 总结

1. 注意：此文章只是单纯实现音乐图标的旋转和暂停的切换，没有对背景音乐的暂停和播放进行处理；
2. css3 的动画功能很强大，但是同时需要我们处理好不同浏览器的兼容性处理！

WXRUI体验二维码

下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表