<!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>
原文地址：https://www.cnblogs.com/ron123/p/9503312.html
时间： 2024-11-13 06:38:11