<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>360度不停旋转动画</title> <style> #audio_btn { width: 30px; height: 30px; background: red; /*border-radius: 60px;*/ float: left; } .rotate { -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 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> </head> <body> <div id="audio_btn" class="rotate"></div> </body> </html>
