<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .header{ width: 80px ; height: 80px; border: 1px solid #ccc; vertical-align: middle; } .rotateHeader{ -webkit-animation:rotateImg 500ms linear ; } @keyframes rotateImg { 0% {transform : rotate(0deg);} 100% {transform : rotate(360deg);} } @-webkit-keyframes rotateImg { 0%{-webkit-transform : rotate(0deg);} 100%{-webkit-transform : rotate(360deg);} } </style> </head> <body> <button type="button" name="button" onclick="dianji()">换一换</button> <img class="header" id="image" src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJEWMkz5OyXIurWg0VbHqrcu5kaa35CMxaZ4xyFLLokNiaEV6yqQRficbxMBacuHVMyAqa9ibt7bxQjQ/132"> <script type="text/javascript"> function dianji() { var idObj = document.getElementById('image') var classval = idObj.getAttribute('class') var cVal = classval + ' rotateHeader' idObj.setAttribute('class',cVal) setTimeout(function(){ idObj.setAttribute('class',classval.replace(/rotateHeader/g, '')) },500) } </script> </body> </html>
