欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  我们可以根据自己想要的动画效果来设置动画,比如在本例中:
 
  设置动画名称为xuehua,动画完成的时间为15s,动画的速度为从开始到结束的速度一致,动画一直无线循环播放
 
  animation:xuehua15slinearinfinite;
 
  程序代码
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="UTF-8"/>
 
  <title></title>
 
  <style>
 
  body{
 
  background:#000;
 
  }
 
  #xuehua{
 
  position:fixed;
 
  left:0;
 
  top:0;
 
  right:0;
 
  bottom:0;
 
  background:url('images/xuehua.png');
 
  -webkit-animation:xuehua15slinearinfinite;
 
  animation:snow15slinearinfinite;
 
  }
 
  @keyframesxuehua{
 
  0%{
 
  background-position:00,00;
 
  }
 
  100%{
 
  background-position:500px1000px,500px500px;
 
  }
 
  }
 
  @-webkit-keyframesxuehua{
 
  0%{
 
  background-position:00,00;
 
  }
 
  100%{
 
  background-position:500px1000px,500px500px;
 
  }
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divid="xuehua"></div>
 
  </body>
 
  </html>







本文转载自中文网
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56392.shtml