纯CSS仿制Google女生节Doodle

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

大家可以点这里在线观看效果，点这里下载收藏效果。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+yrXP1tStwO08L3A+CjxwPjEuwPvTw2NoZWNrYm941ezM/bSmwO21pbv3ysK8/qGjPC9wPgo8cD4yLrWlu/ewtMWloaK7qKGisbO+sLfWsfDX97rQ19OjrLmr08Oxs76wsqLX97GzvrDGq9LGoaM8L3A+CjxwPjMutaW797C0xaXWrrrzo6zA+9PDOmNoZWNrZWTOscDgus3Q1rXc0aHU8bf7o6zOqruooaKxs76wutDX09f3tq+7raGjPC9wPgo8cD66w7XEo6zAtL+0aHRtbDwvcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;">

/* 设置容器 */
#cont{
  width:482px;
  height:250px;
  background:url("https://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("https://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("https://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前端开发技术，分享网页相关资源。
---------------------------------------------------------------