css3 换一换效果 


<!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>

 

posted @ 2018-08-19 23:49  renyangli  阅读(310)  评论(0)    收藏  举报