【HTML】如何在听歌时让图片转起来
某天在听歌的时候突然想到,歌曲的图片是怎么转起来的呢?应该是CSS3的animation属性,但具体怎么实现还是不知,于是一番研究下,有了以下的结果。
核心代码:
.rotate { animation: rotating 1.2s linear infinite; }
@keyframes rotating { from { transform: rotate(0) } to { transform: rotate(360deg) } }
整体实现:
<!DOCTYPE html> <html> <head> <style type="text/css"> #audio_btn { width: 30px; height: 30px; background-image: url(./music.png); /*这里是你本地图片的路径*/ background-size: contain; } .rotate { -webkit-animation: rotating 1.2s linear infinite; //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) } } </style> <meta charset="utf-8"> <title>animation</title> </head> <body> <div id="audio_btn"> <audio loop autoplay src="http://music.163.com/song/media/outer/url?id=22815818.mp3" id="media"> 您的浏览器不支持 audio 标签。 </audio> </div> <script type="text/javascript"> var x = document.getElementById("media"), btn = document.getElementById("audio_btn"); btn.addEventListener('click', function(){ this.classList.toggle("rotate"); if(this.classList.contains("rotate")) x.play(); else x.pause(); }) </script> </body> </html>
遇到的问题:audio自动播放问题,浏览器会禁止自动播放,只有在有用户交互行为时才允许play,待解决