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;属性，结合来实现。

H5页面背景音乐，C33 360°旋转效果相关推荐

一种解决h5页面背景音乐不能自动播放的方案
一种解决h5页面背景音乐不能自动播放的方案场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性现象: 1.大部分IOS系统和少部分Android微信不支持自动播放解 ...
关于H5页面背景音乐播放的问题
起因:这是一个嵌入到APP里的H5页面,都是一些相册集模板,用户添加照片,放到模板里,可以生成记忆链,然后进行播放.但是由于APP都是去调用自带的浏览器,以及安卓去调用自己生成的浏览器,导致了页面在i ...
微信H5页面背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐.基于微信的H5页面的音频自动播放的方法网上有很多教程,本次分享的只是一种思路! <audio id=&q ...
uni-app中，小程序或h5页面背景音乐的播放与暂停
在uni-app中写小程序或h5页面时,用到背景音乐,以及图标的旋转动画一.创建music.js 放在static或新建文件夹 const bgm = uni.createInnerAudioCon ...
多个html5页面背景音乐,微信H5页面背景音乐推荐
移动互联网的兴起,改变了大众的生活方式和习惯,同时也促成了信息发布渠道的多元与创新,其中的佼佼者便是H5.清晰.直观的页面,恰到好处的音乐,充满趣味的互动体验,这些优势都让H5迅速成为一种流行的传播方 ...
解决苹果ios端微信无法自动播放H5页面背景音乐
最近做微信H5页面开发的时候,在页面加入背景音乐,并且设置自动播放. 在PC端模拟手机时是可以正常显示播放的,在安卓端微信上也可以正常播放,然后到苹果端微信就不能正常播放了. 找了许久的原因是苹果io ...
js微信h5页面背景音乐
微信H5页面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
ios系统微信H5页面背景音乐自动播放
思路:在页面中内嵌微信开发的代码块,可让ios手机自动播放背景音乐注意:代码引入了微信js接口,实际开发需配置jsjdk html代码 <!DOCTYPE html> <html ...
使用css3d-engine.js编写简单的 360全景h5页面
什么是这里所说的360全景h5页面?查看下面的案例进行了解: 开发项目:http://game.flyh5.cn/resources/game/wechat/zjh/fangtuo/index.htm ...

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

H5页面背景音乐，C33 360°旋转效果相关推荐

最新文章

热门文章