How to Use html5 and css3 to complete google graffiti animation-

0 today, we will introduce how to use css3 to complete google graffiti animation. When you click the start button on the demo page, the riders and horses on the page will exercise.
It should be emphasized that ie does not support the animation attribute of css3 and once again complains about the evil ie. But we cannot embrace css3 for this reason.
Let's first look at the html code.

Below is part of css.

*{margin:0px;padding:0px;} #logo{position: relative;} .horse{ width:469px; height:54px; background: url('../img/muybridge12-hp-f.jpg'); } .frame{position:absolute;left:0;top:0;z-index: 1;} #play_button{display: none;} #play_label{ width:67px; height:54px; display:block; position: absolute; left:201px; top:54px; z-index: 2; } #play_image{ position: absolute; left:201px; top:54px; z-index: 0; overflow: hidden; width: 68px; height: 55px; } #play_image img{ position: absolute; left: 0; top: 0; }

This part of the code is not too difficult, so I will not explain it in detail. If the css foundation is not very solid, you may wonder how the [start] button is positioned. You can read the position attribute to understand the specific role of absolute.
The following figure shows the page effects of html and css code.
Next we will introduce how to produce animation effects. First, we need to define the key frame, which specifies the animation effect at different stages.
We have created a key frame named horse-ride. For chrome and firefox, we need to add the-webkit-or-moz-prefix in front. The Code starts and ends at 0% and 100% respectively. You can add new cases as needed, such as the animation effect at 50%.

@-webkit-keyframes horse-ride { % {background-position: 0 0;} % {background-position: -804px 0;} } @-moz-keyframes horse-ride { % {background-position: 0 0;} % {background-position: -804px 0;} }

Next, we will add the css3 animation effect for horse.

#play_button:checked ~.horse{ -webkit-animation:horse-ride 0.5s steps(12,end) infinite; -webkit-animation-delay:2.5s; -moz-animation:horse-ride 0.5s steps(12,end) infinite; -moz-animation-delay:2.5s; background-position: -2412px 0; -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190); -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190); }

Here we will first introduce: checked and ~, : Checked is a pseudo-class that indicates the css effect when # play_button is selected ,~ It refers to the brother node of # play_button.
Next we will introduce the css attributes related to. horse. In animation, we use four values, represented in sequence: the Key Frame (the horse-ride defined above), the animation interval, the animation effect, and the number of executions. Then we set the animation delay Time Through animation-delay. Sets the transition animation of the background through the combination of transition and background-position.
Finally, we add an animation effect for the start button.

#play_button:checked ~#play_image img{ left:-68px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; }

You can start development on your own.

Related Articles:

6 hand-painted graffiti button effects based on pure CSS3

You can use javascript html5 canvas to adjust the color, width, and rubber of paint brushes.

Example code of Html5 simple implementation of graffiti