transitions / animation 动画 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  div{
    background: #ccc; 首先自己本身要有默认的
    transition:background 1s linear; 多个可以用,号分开   可以用transform 
  }
  
  div:hover{
    background: red  后面再写改变之后的样子
  }
  </style>
</head>
<body>
<!-- tansition : property duration timing-function-->
  <div>实例文字</div>
</body>
</html>

二：animation

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  div{
    background: red;
    transform:rotate(0deg);
    width: 300px;
    
  }
  @-webkit-keyframes mycolor {
    0%{
      background: red;
      transform:rotate(0deg);
    }
    40%{
      background: blue;
      transform:rotate(40deg);
    }
    80%{
      background: pink;
      transform:rotate(-40deg);
    }
    100%{
      background: red;
      transform:rotate(0deg);
    }
  }
  /*-webkit-animation-name    -webkit-animation-duration -webkit-animation-timing-function*/
  div:hover{
    -webkit-animation: mycolor 3s linear
  }
  </style>
</head>
<body>
<div>实力文字</div>
</body>
</html>


版权声明：本文为博主原创文章，未经博主允许不得转载。

posted on 2015-09-07 15:07  xiaomie  阅读(135)  评论(0)  编辑  收藏  举报

导航