纯CSS仿制Google女生节Doodle

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

完工，请大家批评指正。