<!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>
css3 换一换效果
原文地址：https://www.cnblogs.com/ron123/p/9503312.html