纯CSS仿制Google女生节Doodle看到google今天的女生节Doodle，自己用纯css仿制一个，送给老妈、老婆、女儿。
大家可以点这里在线观看效果，点这里下载收藏效果。
实现原理
1.利用checkbox侦听处理单击事件。
2.单击按钮、花、背景分别作盒子，公用背景并作背景偏移。
3.单击按钮之后，利用:checked伪类和兄弟选择符，为花、背景盒子作动画。
好的，来看html
<inputtype="checkbox"id="play"/><divid="cont"><labelid="btn"for="play"></label><divid="circle"></div></div>css文件，具体参见注释。
/*设置容器*/#cont{width:482px;height:250px;background:url("http://www.google.com/logos/2014/womensday14/sPRite-initial.png");background-position:-20px-10px;position:absolute;left:50%;top:50%;margin:-125px00-241px;}/*设置按钮*/#btn{width:60px;height:78px;position:absolute;left:204px;top:64px;background:url("http://www.google.com/logos/2014/womensday14/sprite-initial.png");background-position:-1495px-110px;/*确保垂直层次在#circle上面*/z-index:10;}#circle{/*初始状态下，花不显示*/opacity:0;width:79px;height:79px;position:absolute;top:60px;left:184px;background:url("http://www.google.com/logos/2014/womensday14/sprite-initial.png");background-position:-1495px-190px;z-index:1;}/*hover状态下按钮样式*/#btn:hover{cursor:pointer;background-position:-1495px-30px;}/*单击之后，按钮隐藏*/#play:checked~#cont#btn{display:none;}/*单击之后，花显示，并轮转*/#play:checked~#cont#circle{opacity:1;animation:roll1.8slinearinfinite;}/*单击之后，背景动画，这里偷了个懒，真比较少，注意一定是steps动画效果*/#play:checked~#cont{animation:run1.2ssteps(1,end)infinite;}@keyframesrun{0%{background-position:-20px-10px;}33%{background-position:-521px-10px;}66%{background-position:-1012px-10px;}100%{background-position:-20px-10px;}}@keyframesroll{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}完工，请大家批评指正。