Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "HTML5 how to achieve the animation effect of falling leaves", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "HTML5 how to achieve leaf falling animation effect" article.

This HTML5 leaf falling animation is based on the webkit kernel, so it can only be used on webkit kernel browsers.

HTML code

XML / HTML code copies content to text

This is a fallen leaf animation based on webkit.

CSS code

CSS code copies content to text

# contai ner {

Position: relative

Height: 700px

Width: 500px

Deposit: 10px automatic

Overflows: hidin

Border: 4px solid # 5C090A

Background: # 4E4226 URL ('image / backgroundLeaves.jpg') does not repeat top left

}

/ * define the location and size of the leafContainer div * /

# leaf Container

{

Position: absolutely

Width: 100%

Height: 100%

}

/ * define the appearance, location and size of the message div * /

# messag e

{

Position: absolutely

Top: 160px

Width: 100%

Height: 300px

Background: transparent URL ('images / textBackground.png') repeat-x center

Color: # 5C090A

Font size: 220%

Font Family: Georgia

Text-align: center

Fill: 20px 10px

-webkit-box-sizing: border-box

-webkit- background-size: 100% 100%

Z index: 1

}

P {

Margins: 15px

}

One

{

Color: # 5C090A

Text decoration: none

}

/ * set the color of the "Dinosaur Horticulture Service" message * /

EM

{

Font-weight: bold

Font style: normal

}

. Phone {

Font size: 150%

Vertical alignment: middle

}

/ * this CSS rule applies to all div elements in leafContainer div.

It styles and animates each leafDiv.

* /

# leafCo ntainer > DIV

{

Position: absolutely

Width: 100px

Height: 100px

/ * We use the following attributes to apply fade-in and drag-and-drop animation to each leaf.

Each of these properties has two values. These values match the settings respectively.

Fade in and out.

* /

-webkit-animation-iteration-count: infinite, infinite

-webkit-animation- direction: normal, normal

-webkit-animation-timing-function: linear, ease in

}

/ * this CSS rule applies directly to all img elements within the div element, which are

Directly inside the leafContainer div. In other words, it matches the 'img' element

In the leafDivs created in the createALeaf () function.

* /

# leafCotainer > div > img {

Position: absolutely

Width: 100px

Height: 100px

/ * We use the following properties to adjust clockwise or counterclockwise rotation and flip

The animation on each leaf.

The createALeaf function in the Leaves.js file determines whether the leaf has

Rotate clockwise or counterclockwise and flip the animation.

* /

-webkit-animation-iteration-count: infinite

-webkit-animation- direction: standby

-webkit-animation-timing-function: easy to enter

-webkit-transform-origin:50%-100%

}

/ * hide a leaf at the end of the animation * /

@-webkit-keyframes fade out

{

/ * Show a leaf and hide it at 95% or less of the animation, otherwise * /

0% {opacity: 1;}

95% {opacity: 1;}

100% {opacity: 0;}

}

/ * reduce the leaf from-300 to 600 pixels on the y-axis * /

@-webkit-keyframes placement

{

/ * move the leaf along the y-axis to-300 pixels at the beginning of the animation * /

0% {- webkit-transform:translate (0px,-50px);}

/ * move the leaf along the y-axis to 600 pixels at the end of the animation * /

100% {- webkit-transform:translation (0px, 650px);}

}

/ * rotate the leaf from-50 to 50 degrees in 2D space * /

@-webkit-keyframes rotates clockwise

{

/ * rotate the leaf-50 degrees in 2D space at the beginning of the animation * /

0% {- webkit-transform: rotate (- 50deg);}

/ * at the end of the animation, rotate the leaf 50 degrees in 2D space * /

100% {- webkit-transform: 50deg;}

}

/ * flip the leaf and rotate it from 50 degrees to-50 degrees in 2D space * /

@-webkit-keyframes rotates counterclockwise

{

/ * flip the leaf at the beginning of the animation and rotate it 50 degrees in 2D space * /

0% {- webkit-transform:scale (- 1) rotation (50deg);}

/ * at the end of the animation, flip the leaf in 2D space and rotate it by-50 degrees * /

100% {- webkit-transform:scale (- 1) rotation (- 50deg);}

}

JavaScript code

The JavaScript code copies the content to

/ * define the number of leaves to be used in the animation * /

Const NUMBER_OF_LEAVES = 30

/ *

Called when the fallen leaves page is fully loaded.

* /

Function init ()

{

/ * get a reference to the element that will contain the leaf * /

Var container = document.getElementById ('leafContainer')

/ * fill the empty container with new leaves * /

For (var I = 0; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.