H5页面背景音乐,C33 360°旋转效果

在做H5页面的时候,经常会需要用到背景音乐,音乐图标自动旋转

HTML代码如下:

1 <div id="audio_btn" class="rotate">
2     <audio loop src="bg_audio.mp3" id="media" autoplay="" preload=""></audio>
3 </div>

CSS代码如下:使用了Keyframes 结合 transfrom 来实现CSS 360°旋转效果。

 1 #audio_btn {
 2     width: 30px;
 3     height: 30px;
 4     background-image: url(static/pccss/images/music_play.png);//图标
 5     background-size: contain;
 6 }
 7 
 8 .rotate {
 9     -webkit-animation: rotating 5s linear infinite;
10     -moz-animation: rotating 5s linear infinite;
11     -o-animation: rotating 5s linear infinite;
12     animation: rotating 5s 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 }

图片暂停的同时,实现背景音乐也暂停,图片旋转的时候,音乐也继续播放。

JS代码如下:

 实现点击图标,旋转暂停,再点击再旋转

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

css的定位样式属性来实现;会用到css中的position:fixed;属性,结合来实现。

相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页