Comments: Today we will introduce how to use css3 to complete google graffiti animation. After you click the start button on the demo page, the riders and horses on the page will exercise. If you need a friend, you can understand what we will introduce today, 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 be moving, http://demo.jb51.net/js/2012/googlecss3/
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.
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> </title>
<Link rel = "stylesheet" type = "text/css" href = "css/google-doodle-animation-in-css3-without-javascript.css"/>
</Head>
<Body>
<Div id = "logo">
<Div class = "frame">
</Div>
<Label for = "play_button" id = "play_label"> </label>
<Input type = "checkbox" id = "play_button" name = "play_button"/>
<Span id = "play_image">
</Span>
<Div class = "horse"> </div>
<Div class = "horse"> </div>
<Div class = "horse"> </div>
</Div>
</Body>
</Html>
Below is part of css.
The Code is as follows:
* {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.
Pic
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. You can learn more through http://www.w3schools.com/css3/css3_animations.asp.
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%.
The Code is as follows:
@-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.
The Code is as follows:
# Play_button: checked ~. Horse {
-Webkit-animation: horse-ride 0.5 s steps (12, end) infinite;
-Webkit-animation-delay: 2.5 s;
-Moz-animation: horse-ride 0.5 s steps (12, end) infinite;
-Moz-animation-delay: 2.5 s;
Background-position:-2412px 0;
-Webkit-transition: all 2.5 s cubic-bezr (0.550, 0.055, 0.675, 0.190 );
-Moz-transition: all 2.5 s cubic-bezr (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.
The Code is as follows:
# Play_button: checked ~ # Play_image img {
Left:-68px;
-Webkit-transition: all 0.5 s transfer-in;
-Moz-transition: all 0.5 s bytes-in;
}
You can start development on your own.
Demo: google-doodle-animation-in-css3-without-javascript.zip 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 be moving.
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.
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> </title>
<Link rel = "stylesheet" type = "text/css" href = "css/google-doodle-animation-in-css3-without-javascript.css"/>
</Head>
<Body>
<Div id = "logo">
<Div class = "frame">
</Div>
<Label for = "play_button" id = "play_label"> </label>
<Input type = "checkbox" id = "play_button" name = "play_button"/>
<Span id = "play_image">
</Span>
<Div class = "horse"> </div>
<Div class = "horse"> </div>
<Div class = "horse"> </div>
</Div>
</Body>
</Html>
Below is part of css.
The Code is as follows:
* {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.
Pic
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. You can learn more through http://www.w3schools.com/css3/css3_animations.asp.
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%.
The Code is as follows:
@-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.
The Code is as follows:
# Play_button: checked ~. Horse {
-Webkit-animation: horse-ride 0.5 s steps (12, end) infinite;
-Webkit-animation-delay: 2.5 s;
-Moz-animation: horse-ride 0.5 s steps (12, end) infinite;
-Moz-animation-delay: 2.5 s;
Background-position:-2412px 0;
-Webkit-transition: all 2.5 s cubic-bezr (0.550, 0.055, 0.675, 0.190 );
-Moz-transition: all 2.5 s cubic-bezr (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.
The Code is as follows:
# Play_button: checked ~ # Play_image img {
Left:-68px;
-Webkit-transition: all 0.5 s transfer-in;
-Moz-transition: all 0.5 s bytes-in;
}
You can start development on your own.
Demo: http://xiazai.jb51.net/201212/yuanma/googlecss3_jb51.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
