time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】16、CSS3实现google涂鸦动画示例

【HTML5实践教程】16、CSS3实现google涂鸦动画示例

时间:2012-12-15 21:07 点击:1243次 字体:[ ]




  今天我们将介绍,如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后,页面中的骑手和马匹将会运动起来,http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html

  这里需要强调的一点是,ie不支持css3的动画属性,再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。

 

  我们先来看html代码。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <title></title> 
  5.     <link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/> 
  6. </head> 
  7. <body> 
  8. <div id="logo"> 
  9.     <div class="frame"> 
  10.         <img src="img/muybridge12-hp-v.png"/> 
  11.     </div> 
  12.     <label for="play_button" id="play_label"></label> 
  13.     <input type="checkbox" id="play_button" name="play_button"/> 
  14.     <span id="play_image"> 
  15.         <img src="img/muybridge12-hp-p.jpg"/> 
  16.     </span> 
  17.     <div class="horse"></div> 
  18.     <div class="horse"></div> 
  19.     <div class="horse"></div> 
  20. </div> 
  21. </body> 
  22. </html> 

  下面是部分css。

  1. *{margin:0px;padding:0px;}  
  2. #logo{positionrelative;}  
  3. .horse{  
  4.     width:469px;  
  5.     height:54px;  
  6.     backgroundurl('../img/muybridge12-hp-f.jpg');  
  7. }  
  8. .frame{position:absolute;left:0;top:0;z-index1;}  
  9.  
  10. #play_button{displaynone;}  
  11. #play_label{  
  12.     width:67px;  
  13.     height:54px;  
  14.     display:block;  
  15.     positionabsolute;  
  16.     left:201px;  
  17.     top:54px;  
  18.     z-index2;  
  19. }  
  20. #play_image{  
  21.     positionabsolute;  
  22.     left:201px;  
  23.     top:54px;  
  24.     z-index0;  
  25.     overflowhidden;  
  26.     width68px;  
  27.     height55px;  
  28. }  
  29. #play_image img{  
  30.     positionabsolute;  
  31.     left: 0;  
  32.     top: 0;  



本文地址 : http://www.fengfly.com/plus/view-210906-1.html
标签: CSS3 HTML5
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: