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

最新推荐文章于 2022-10-28 14:35:33 发布

原创

最新推荐文章于 2022-10-28 14:35:33 发布 · 3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #H5 #js

本文介绍了如何在H5页面中添加背景音乐，并使用CSS的Keyframes和transform实现360°旋转效果。通过JS控制，点击图标可以暂停和继续旋转，同时控制音乐播放。利用css的position：fixed;属性进行页面定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做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