How to use html5 and css3 to complete google graffiti animation-H5 Tutorial-php.cn

How to use html5 and css3 to complete google graffiti animation

PHP中文网

Release： 2017-03-16 13:17:42

Original

1868 people have browsed it

Today we will introduce how to use css3 to complete google doodle animation. When you click the [Start] button on the demo page, the riders and horses on the page will move
One thing that needs to be emphasized here is that IE does not support the animation attributes of CSS3, and I am complaining about the evil IE again. But we cannot use this as a reason not to embrace css3.
Let’s look at the html code first.

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" type="text/css" 
href="css/google-doodle-animation-in-css3-without-javascript.css"/> 
</head> 
<body> 
<p id="logo"> 
<p 
class="frame"> 
<img src="img/muybridge12-hp-v.png"/> 
</p> 
<label for="play_button" 
id="play_label"></label> 
<input type="checkbox" id="play_button" 
name="play_button"/> 
<span id="play_image"> 
<img 
src="img/muybridge12-hp-p.jpg"/> 
</span> 
<p 
class="horse"></p> 
<p class="horse"></p> 
<p class="horse"></p> 
</p> 
</body> 
</html>

Copy after login

The following is part of the css.

*{margin:0px;padding:0px;} 
#logo{position: relative;} 
.horse{ 
width:469px; 
height:54px; 
background: 
url(&#39;../img/muybridge12-hp-f.jpg&#39;); 
} 
.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; 
}

Copy after login

This part of the code is not too difficult, so I won’t explain it in detail. Readers who do not have a very solid foundation in CSS may wonder how the [Start] button is positioned. You can read the position attribute yourself to understand the specific role of absolute.
The following is the page effect completed by the above html and css code.
Let’s introduce how to create animation effects. We first need to define keyframes, which specify the effects of animation at different stages.
We created a keyframe called horse-ride. For chrome and firefox, you need to add -webkit- or -moz- prefix in front. 0% and 100% are the beginning and end of the code respectively. New cases can be added 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;} 
}

Copy after login

Next, let’s add css3 animation effects to the 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); 
}

Copy after login

Here we first introduce :checked and ~, :checked is a pseudo-class, which refers to the css effect when #play_button is selected, and ~ refers to the sibling node of #play_button.
Next, we will introduce the css attributes related to .horse. We use 4 values in animation, which represent: keyframe (horse-ride we defined above), animation interval, animation effect and execution number. Then we set the animation delay time through animation-delay. Set the background transition animation by combining transition and background-position.
Finally, we add animation effects to 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; 
}

Copy after login

You can try to develop it yourself.

6 hand-drawn graffiti button effects based on pure CSS3

Adjustable based on javascript html5 canvas Graffiti board with brush color/thickness/eraser

Html5 simple implementation of graffiti board sample code