annimate

原创 2016年08月30日 19:32:40
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  div{width: 50px;height: 50px;background: red;border-radius: 50%;}
  @-webkit-keyframes runZ{
  33.3%{margin-left: 200px;margin-top: 0;}
  66.7%{margin-left: 0;margin-top: 200px;}
  100%{margin-left: 200px;margin-top: 200px;}
  }
   
  p:hover+div{animation: runZ 2s linear infinite alternate;}
  </style>
  </head>
  <body>
  <p>阿萨德法师打发斯蒂芬</p>
  <div></div>
  </body>
  </html>

css3动画(annimate)基础

首先推荐一个css3动画效果库:有具体的使用方法以及效果演示: Animate.css动画库CSS3 @keyframes 规则 如需在 CSS3 中创建动画,需要学习 @keyframes 规则...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:annimate
举报原因:
原因补充:

(最多只允许输入30个字)