Google Girls' Day with pure CSS imitation

I saw google's Girls' Day today, DoCoMo, And I copied it with pure css and gave it to my mom, wife, and daughter.

You can click here to view the online effect and click here to download the effect from the favorites folder.

Implementation Principle

1. Use the checkbox listener to process click events.

2. click the button, flower, and background as the box, public background, and background offset respectively.

3. click the button and use the checked pseudo class and sibling selector to animated the flower and background boxes.

Okay. Let's look at html.

<input type="checkbox" id="play" /><div id="cont">  <label id="btn" for="play"></label>  <div id="circle"></div></div>

Css file. For more information, see annotations.

/* Set the container */# 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;}/* set button */# btn {width: 60px; height: 78px; position: absolute; left: 204px; top: 64px; background: url ("http://www.google.com/logos/2014/womensday14/sprite-initial.png"); background-p Osition:-1495px-110px;/* Ensure that the vertical level is above # circle */z-index: 10;} # circle {/* in the initial state, flowers do not show */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-pixel PX; z-index: 1;}/* button style in hover state */# btn: hover {cursor: pointer; background-position: -1495px-30px;}/* click it to hide */# play: checke D ~ # Cont # btn {display: none;}/* after clicking, the flowers are displayed and rotated */# play: checked ~ # Cont # circle {opacity: 1; animation: roll 1.8 s linear infinite, note that it must be the steps animation effect */# play: checked ~ # Cont {animation: run 1.2 s 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 )}}

Please criticize and correct the process.

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

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------