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