·您当前的位置:首页 > 技术教程 > 酷播云 >

[CSS3]CSS3应用animation(动画)的介绍与实例

时间:2019-12-18 17:32未知
[CSS3]CSS3应用animation(动画)的介绍与实例 使用简写属性把 animation 绑定到一个div 元素: div { animation:mymove5sinfinite; -webkit-animation:mymove5sinfinite;/*Safari和Chrome*/ } !DOCTYPEhtml html head meta charset = utf-8 title 菜鸟教程(

[CSS3]CSS3应用animation(动画)的介绍与实例

使用简写属性把 animation 绑定到一个<div> 元素:

  1. div 
  2.     animation:mymove 5s infinite; 
  3.     -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8">  
  5. <title>菜鸟教程(runoob.com)</title> 
  6. <style>  
  7. div 
  8.     width:100px; 
  9.     height:100px; 
  10.     background:red; 
  11.     position:relative; 
  12.     animation:mymove 5s infinite; 
  13.     -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ 
  14.  
  15. @keyframes mymove 
  16.     from {left:0px;} 
  17.     to {left:200px;} 
  18.  
  19. @-webkit-keyframes mymove /*Safari and Chrome*/ 
  20.     from {left:0px;} 
  21.     to {left:200px;} 
  22. </style> 
  23. </head> 
  24. <body> 
  25.  
  26. <p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p> 
  27.  
  28. <div></div> 
  29.  
  30. </body> 
  31. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器