纯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)}

}

完工，请大家批评指正。