純CSS仿製Google女生節Doodle

看到google今天的女生節Doodle，自己用純css仿製一個，送給老媽、老婆、女兒。

大家可以點這裡線上觀看效果，點這裡下載收藏效果。

實現原理

1.利用checkbox偵聽處理單擊事件。

2.單擊按鈕、花、背景分別作盒子，公用背景並作背景位移。

3.單擊按鈕之後，利用:checked偽類和兄弟選擇符，為花、背景盒子作動畫。

好的，來看html

<input type="checkbox" id="play" /><div id="cont">  <label id="btn" for="play"></label>  <div id="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:-125px 0 0 -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:roll 1.8s linear infinite;}/* 單擊之後，背景動畫，這裡偷了個懶，真比較少，注意一定是steps動畫效果 */#play:checked~#cont{  animation:run 1.2s steps(1,end) infinite;}@keyframes run{  0%{background-position:-20px -10px;}  33%{background-position:-521px -10px;}  66%{background-position:-1012px -10px;}  100%{background-position:-20px -10px;}}@keyframes roll{  0%{transform:rotate(0deg)}  100%{transform:rotate(360deg)}}

完工，請大家批評指正。

---------------------------------------------------------------

前端開發whqet，關注web前端開發技術，分享網頁相關資源。
---------------------------------------------------------------