css中的@keyframes规则实现物体的运动

最新推荐文章于 2022-01-19 17:42:11 发布

夏侯_瑾轩

最新推荐文章于 2022-01-19 17:42:11 发布

阅读量688

点赞数

分类专栏： html+div+css+javascript+jquery+bootstrap+ajax+json

本文链接：https://blog.csdn.net/baidu_24545901/article/details/78640713

版权

8 篇文章 0 订阅

订阅专栏

  <!DOCTYPE html> 

  <html> 

  <head> 

  <meta charset="utf-8">  

  <title>html运动</title>  

  <style>  

div

{

      width:100px; 

      height:100px; 

      background:red; 

      position:relative; 

      animation:mymove 5s infinite; 

      -webkit-animation:mymove 5s infinite; /* Safari and Chrome */   /*infinite代表的意思是重复播放  linear表示的是动作是匀速的*/ 

}

  @keyframes mymove 

{

      from {top:0px;} 

      to {top:200px;} 

}

  @-webkit-keyframes mymove /* Safari and Chrome */ 

{

      from {top:0px;} 

      to {top:200px;} 

}

  </style> 

  </head> 

  <body> 

  <p><strong>注意:</strong>  @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.</p> 

  <div></div> 

  </body> 

  </html> 

优惠劵

关注关注