本文主要是介绍旋转音乐html,H5页面背景音乐，C33 360°旋转效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
我现整理了一下代码：
Demo
点击Icon暂停，再次点击继续。
HTML代码如下：
1
2
3
CSS代码如下：
1 #audio_btn {
2 width: 30px;
3 height: 30px;
4 background-image: url(normalmusic.svg);
5 background-size: contain;
6 }
7
8 .rotate {
9 -webkit-animation: rotating 1.2s linear infinite;
10 -moz-animation: rotating 1.2s linear infinite;
11 -o-animation: rotating 1.2s linear infinite;
12 animation: rotating 1.2s linear infinite
13 }
14
15 @-webkit-keyframes rotating {
16 from { -webkit-transform: rotate(0) }
17 to { -webkit-transform: rotate(360deg) }
18 }
19
20 @keyframes rotating {
21 from { transform: rotate(0) }
22 to { transform: rotate(360deg) }
23 }
24 @-moz-keyframes rotating {
25 from { -moz-transform: rotate(0) }
26 to { -moz-transform: rotate(360deg) }
27 }
使用了Keyframes 结合 transfrom 来实现CSS 360°旋转效果。
JS代码如下：
1. 实现点击图标，旋转暂停，再点击再旋转
1 $("#audio_btn").click(function(){
2 $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
3 })
2. 图片暂停的同时，实现背景音乐也暂停，图片旋转的时候，音乐也继续播放。
结合上面的代码，修改如下：
1 var x = document.getElementById("media");
2 $(function(){
3 $("#audio_btn").click(function(){
4 $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
5
6 //控制背景音乐 播放或暂停
7 if($(this).hasClass("rotate")){
8 x.play();
9 }else{
10 x.pause();
11 }
12 })
13 });
因为H5的audio/video自带pause()和play()的方法，我们直接调用就可以了。但需要注意的是，它不是jquery的方法，如果直接写成$(audio_btn).find("audio").pause()，是无效的。所以要用原生JS DOM来写。
原文：http://www.cnblogs.com/wangking/p/5868615.html
这篇关于旋转音乐html,H5页面背景音乐，C33 360°旋转效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
