zoukankan html css js c++ java

css3 换一换效果


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    .header{
         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>

查看全文

相关阅读:
OpenJudge 6042 雇佣兵
 POJ 1741 树上点的分治
 Codevs 1695 Windows2013
复制书稿
 乘积最大
 编辑距离问题
 石子合并
 最大正方形子矩阵
 选菜
 混合背包

原文地址：https://www.cnblogs.com/ron123/p/9503312.html