css3可控旋转音乐播放按钮

1、准备好需要用到的图标。

2、新建html文档。

4、书写css代码。<style>*{ margin:0; padding:0; list-style:none;}#ln #audio-btn{width: 44px;height: 44px; margin:100px auto;background-size: 100% 100%;}#ln .on{background: url('images/music_on.png') no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}#ln .off{background: url('images/music_off.png') no-repeat 0 0;}@-webkit-keyframes rotating {from{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg); -o-transform: rotate(0deg);transform: rotate(0deg);}to{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes rotating {from{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg);}to{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg); }}</style>

6、代码整体结构。