纯CSS仿制Google女生节Doodle

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

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

实现原理

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

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

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

好的，来看html

[html]  view plain copy

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文件，具体参见注释。

[css]  view plain copy

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. }  

完工，请大家批评指正。