|
[tr][td] 喜欢google的女生节Doodle吗，试着自己用纯css仿制了一个，送给老妈、老婆、女儿的特别礼物。
图片：091522d0d08l8rmml3rrra.png  大家可以点这里在线观看效果，点这里下载收藏效果。 实现原理 1.利用checkbox侦听处理单击事件。 2.单击按钮、花、背景分别作盒子，公用背景并作背景偏移。 3.单击按钮之后，利用:checked伪类和兄弟选择符，为花、背景盒子作动画。 下面来看html： [*] [*] [*] [*] [*] 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.} [/td][/tr] |
|
