安然不哭-西坝阿超个人博客

做技术一定要一颗恒心,这样才不会半途而废。

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

2018-2-24 钟建超

在做H5页面的时候,经常会需要用到背景音乐,比如电子贺卡、动态音乐相册等,右上角有个360°旋转的音乐图标,点击可以控制音乐是否播放,那这个效果是如何实现的呢?
我现整理了一下代码:

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


CSS代码如下:

#audio_btn {
    width: 30px;
    height: 30px;
    background-image: url(normalmusic.svg);
    background-size: contain;
}

.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite
}

@-webkit-keyframes rotating {
    from { -webkit-transform: rotate(0) }
    to { -webkit-transform: rotate(360deg) }
}

@keyframes rotating {
    from { transform: rotate(0) }
    to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
    from { -moz-transform: rotate(0) }
    to { -moz-transform: rotate(360deg) }
}


JS代码如下:


var x = document.getElementById("media"); 
$(function(){
    $("#audio_btn").click(function(){
        $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
        
        //控制背景音乐 播放或暂停            
        if($(this).hasClass("rotate")){
            x.play();
        }else{
            x.pause();
        }
    })
});

标签: html