HTML5 practice-detailed explanation of how to complete Google graffiti animation using css3-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 practice-detailed explanation of how to complete Google graffiti animation using css3

黄舟

Mar 22, 2017 pm 04:22 PM

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 move.

One thing that needs to be emphasized here is that IE does not support the animation properties of CSS3. I will complain 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.

Next we will introduce how to produce animation effects. We first need to define keyframes, which specify the effects of animation at different stages. You can learn more at http://www.w3schools.com/css3/css3_animations.asp.

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 {
    0% {background-position: 0 0;}
    100% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
    0% {background-position: 0 0;}
    100% {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 properties 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

The above is the detailed content of HTML5 practice-detailed explanation of how to complete Google graffiti animation using css3. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn