Home Web Front-end H5 Tutorial How to use html5 and css3 to complete google graffiti animation

How to use html5 and css3 to complete google graffiti animation

Mar 16, 2017 pm 01:17 PM
css3 animation

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>

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; 
}

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;} 
}

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); 
}

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; 
}


You can try to develop it yourself.

Related articles:

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

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

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Beginner's Guide to RimWorld: Odyssey
1 months ago By Jack chen
PHP Variable Scope Explained
4 weeks ago By 百草
Tips for Writing PHP Comments
3 weeks ago By 百草
Commenting Out Code in PHP
3 weeks ago By 百草

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1509
276
HTML5 video streaming techniques and considerations HTML5 video streaming techniques and considerations Jul 14, 2025 am 02:41 AM

Three points to note for making HTML5 videos smoothly playback: 1. Select a suitable video format, such as MP4, WebM or Ogg, and provide multiple formats or a single format according to the target user's choice; 2. Use adaptive bit rate technology such as HLS or DASH, combined with hls.js or dash.js to achieve automatic clarity switching; 3. Reasonably set preloading policies and server configurations, such as preload attributes, byte range requests, compression and cache, to optimize loading speed and reduce traffic consumption.

Developing Web Games Using HTML5 Canvas and Game APIs Developing Web Games Using HTML5 Canvas and Game APIs Jul 14, 2025 am 03:08 AM

HTML5Canvas is an API for drawing graphics and animations on web pages, combined with GameAPIs to enable feature-rich web games. 1. Set elements and get 2D context; 2. Use JavaScript to draw objects and implement animation loops; 3. Process user input to control the game; 4. Combine APIs such as Gamepad, WebAudio, PointerLock and Fullscreen to improve the interactive experience; 5. Optimize performance and manage resource loading to ensure smooth operation.

Why is my image not showing up in HTML? Why is my image not showing up in HTML? Jul 28, 2025 am 02:08 AM

Image not displayed is usually caused by a wrong file path, incorrect file name or extension, HTML syntax issues, or browser cache. 1. Make sure that the src path is consistent with the actual location of the file and use the correct relative path; 2. Check whether the file name case and extension match exactly, and verify whether the image can be loaded by directly entering the URL; 3. Check whether the img tag syntax is correct, ensure that there are no redundant characters and the alt attribute value is appropriate; 4. Try to force refresh the page, clear the cache, or use incognito mode to eliminate cache interference. Troubleshooting in this order can solve most HTML image display problems.

HTML5 form validation guide HTML5 form validation guide Jul 14, 2025 am 03:07 AM

Form verification can improve efficiency through HTML5 native mechanism. 1. Use the required attribute to ensure the required fields; 2. Use the input type (such as email, number) and pattern attributes to verify the data format; 3. Use the setCustomValidity() method and CSS to adjust the error prompts and styles to optimize the user experience.

How to check for browser support for specific HTML5 features? How to check for browser support for specific HTML5 features? Jul 14, 2025 am 03:07 AM

The most direct way to confirm whether the browser supports a certain HTML5 feature is to use JavaScript detection. 1. Use Modernizr for feature detection: After introducing the Modernizr library, it will add the corresponding class to the tag, and can judge the support status through the Modernizr object; 2. Use native JavaScript to detect specific features: check whether there is a certain attribute or method in the global object, such as detecting canvas or localStorage; 3. Check the compatibility data on CanIUse: Visit caniuse.com to obtain the support of HTML5 features by different browsers, assist in decision-making and compatibility plan planning.

How to use radio buttons in HTML5? How to use radio buttons in HTML5? Jul 21, 2025 am 01:08 AM

The key to using radio buttons in HTML5 is to understand how they work and correctly organize the code structure. 1. The name attribute of each radio button must be the same to achieve mutually exclusive selection; 2. Use label tags to improve accessibility and click experience; 3. It is recommended to wrap each option in a div or label to enhance structural clarity and style control; 4. Set default selections through the checked attribute; 5. The value value should be concise and meaningful, which is convenient for form submission processing; 6. The style can be customized through CSS, but the function needs to be ensured to be normal. Mastering these key points can effectively avoid common problems and improve the effectiveness of use.

Headless CMS and Static Site Generation (SSG) with Astro Headless CMS and Static Site Generation (SSG) with Astro Jul 26, 2025 am 07:31 AM

Use headless CMS in conjunction with Astro's static site generation (SSG) to build high-performance, content-driven websites. 2.Astro gets content from headless CMS (such as Sanity, Contentful, Strapi, WordPress, or DatoCMS) through APIs and pre-renders as static pages. 3. Use getStaticPaths() to generate the page path, obtain data through CMSAPI calls, and separate the content from the front-end. 4. Advantages include excellent performance (fast loading, SEO-friendly), friendly editing experience, architectural flexibility, high security and scalability. 5. Content updates require rebuilding of the site, and you can use CMSwebhook to touch

What is the difference between H5 and HTML5? What is the difference between H5 and HTML5? Jul 14, 2025 am 02:55 AM

There is no essential difference between H5 and HTML5, and H5 is the abbreviation of HTML5. HTML5 is the fifth major version of the hypertext markup language. It was officially released in 2014 and has added functions such as semantic tags, audio and video support, Canvas drawing, better form controls and mobile device adaptation. The name H5 is mostly used in informal occasions, such as mobile development discussions, marketing copy or code comments, and is widely used for its simplicity and convenience; in specific regions or industries, H5 may implicitly refer to mobile web pages or modern web page standards based on HTML5 technology; HTML5 should be used when formal writing, and H5 can be used when developers communicate or space is limited.

See all articles