纯CSS仿制Google女生节Doodle

8/31/2015来源:CSS教程人气:586

CSS仿制Google女生节Doodle

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

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

实现原理

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

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

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

好的,来看html

  1. <inputtype="checkbox"id="play"/>
  2. <divid="cont">
  3. <labelid="btn"for="play"></label>
  4. <divid="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:-125px00-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:roll1.8slinearinfinite;
  49. }
  50. /*单击之后,背景动画,这里偷了个懒,真比较少,注意一定是steps动画效果*/
  51. #play:checked~#cont{
  52. animation:run1.2ssteps(1,end)infinite;
  53. }
  54. @keyframesrun{
  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. @keyframesroll{
  61. 0%{transform:rotate(0deg)}
  62. 100%{transform:rotate(360deg)}
  63. }

完工,请大家批评指正。