纯CSS仿制Google女生节Doodle

浏览数：20 / 时间：2015年06月09日

看到google今天的女生节Doodle，自己用纯css仿制一个，送给老妈、老婆、女儿。

大家可以点这里在线观看效果，点这里下载收藏效果。

实现原理

1.利用checkbox侦听处理单击事件。

2.单击按钮、花、背景分别作盒子，公用背景并作背景偏移。

3.单击按钮之后，利用:checked伪类和兄弟选择符，为花、背景盒子作动画。

好的，来看html 

  1. <input type="checkbox" id="play" />  
  2. <div id="cont">  
  3.   <label id="btn" for="play"></label>  
  4.   <div id="circle"></div>  
  5. </div>  

css文件，具体参见注释。 

  1. /* 设置容器 */  
  2. #cont{  
  3.   width:482px;  
  4.   height:250px;  
  5.   background:url("http://www.google.com/logos/2014/womensday14/sprite-initial.png");  
  6.   background-position:-20px -10px;  
  7.   position:absolute;  
  8.   left:50%;  
  9.   top:50%;  
  10.   margin:-125px 0 0 -241px;  
  11. }  
  12. /* 设置按钮 */  
  13. #btn{  
  14.   width:60px;  
  15.   height:78px;  
  16.   position:absolute;  
  17.   left:204px;  
  18.   top:64px;  
  19.   background:url("http://www.google.com/logos/2014/womensday14/sprite-initial.png");  
  20.   background-position:-1495px -110px;   
  21.   /* 确保垂直层次在#circle上面 */  
  22.   z-index:10;  
  23. }  
  24. #circle{  
  25.   /* 初始状态下，花不显示 */  
  26.   opacity:0;  
  27.   width:79px;  
  28.   height:79px;  
  29.   position:absolute;  
  30.   top:60px;  
  31.   left:184px;  
  32.   background:url("http://www.google.com/logos/2014/womensday14/sprite-initial.png");  
  33.   background-position:-1495px -190px;  
  34.   z-index:1;  
  35. }  
  36. /* hover状态下按钮样式 */  
  37. #btn:hover{  
  38.   cursor:pointer;  
  39.   background-position:-1495px -30px;  
  40. }  
  41. /* 单击之后，按钮隐藏 */  
  42. #play:checked~#cont #btn{  
  43.   display:none;  
  44. }  
  45. /* 单击之后，花显示，并轮转 */  
  46. #play:checked~#cont #circle{  
  47.   opacity:1;  
  48.   animation:roll 1.8s linear infinite;  
  49. }  
  50. /* 单击之后，背景动画，这里偷了个懒，真比较少，注意一定是steps动画效果 */  
  51. #play:checked~#cont{  
  52.   animation:run 1.2s steps(1,end) infinite;  
  53. }  
  54. @keyframes run{  
  55.   0%{background-position:-20px -10px;}  
  56.   33%{background-position:-521px -10px;}  
  57.   66%{background-position:-1012px -10px;}  
  58.   100%{background-position:-20px -10px;}  
  59. }  
  60. @keyframes roll{  
  61.   0%{transform:rotate(0deg)}  
  62.   100%{transform:rotate(360deg)}  
  63. }  

完工，请大家批评指正。

纯CSS仿制Google女生节Doodle,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： http it class string html 类 word top lu Go blog http it class string html 类 word top lu Go blog

相关文章

随机文章

您可能还喜欢

您可能还喜欢