Shulou(Shulou.com)05/31 Report--

The knowledge of this article "how to use the animation attribute to achieve snowflake falling special effects in CSS3" is not understood by most people, so the editor summarizes the following contents to you, detailed contents, 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 "how to use the animation attribute in CSS3 to achieve snowflake falling special effects" article.

In CSS3 we can use the animation attribute to create complex animation effects, including moving, rotating, zooming, tilting (please refer to the transform,scale and other attributes in css3) and so on. All we need to do is create a Keyframe (@ keyframes) and add the actions we want to implement.

The code is as follows:

@ keyframes bgchange {

From {background:red;}

To {background:yellow}

}

Div:hover {

Animation:bgchange 5s

}

When the mouse hovers over, the background color changes from red to yellow within five seconds.

Note: different browsers need different prefixes when using animation and @ keyframes!

The following code implements the snowflake falling function:

The code is as follows:

Snowing snow

Body {

Background: # eee

}

@ keyframes mysnow {

0% {

Bottom:100%

Opacity:0

}

50% {

Opacity:1

Transform: rotate (1080deg)

}

100% {

Transform: rotate (0deg)

Opacity: 0

Bottom:0

}

}

@-webkit-keyframes mysnow {

0% {

Bottom:100%

Opacity:0

}

50% {

Opacity:1

-webkit-transform: rotate (1080deg)

}

100% {

-webkit-transform: rotate (0deg)

Opacity: 0

Bottom:0

}

}

@-moz-keyframes mysnow {

0% {

Bottom:100%

Opacity:0

}

50% {

Opacity:1

-moz-transform: rotate (1080deg)

}

100% {

-moz-transform: rotate (0deg)

Opacity: 0

Bottom:0

}

}

@-ms-keyframes mysnow {

0% {

Bottom:100%

Opacity:0

}

50% {

Opacity:1

-ms-transform: rotate (1080deg)

}

100% {

-ms-transform: rotate (0deg)

Opacity: 0

Bottom:0

}

}

@-o-keyframes mysnow {

0% {

Bottom:100%

Opacity:0

}

50% {

Opacity:1

-o-transform: rotate (1080deg)

}

100% {

-o-transform: rotate (0deg)

Opacity: 0

Bottom:0

}

}

.roll {

Position:absolute

Opacity:0

Animation: mysnow 5s

-webkit-animation: mysnow 5s

-moz-animation: mysnow 5s

-ms-animation: mysnow 5s

-o-animation: mysnow 5s

Height:80px

}

.div {

Position:fixed

}

(function () {

Function snow (left,height,src) {

Var div = document.createElement ("div")

Var img = document.createElement ("img")

Div.appendChild (img)

Img.className = "roll"

Img.src = src

Div.style.left=left+ "px"

Div.style.height=height+ "px"

Div.className= "div"

Document.getElementById ("snowzone") .appendChild (div)

SetTimeout (function () {

Document.getElementById ("snowzone") .removeChild (div)

/ / console.log (window.innerHeight)

}, 5000)

}

SetInterval (function () {

Var left = Math.random () * window.innerWidth

Var height = Math.random () * window.innerHeight

Var src = "s" + Math.floor (Math.random () * 2png) + ".png"; / / the two images are "s1.png" and "s2.png" respectively

Snow (left,height,src)

}, 500)

) ()

The above is about the content of this article on "how to use animation attributes in CSS3 to achieve snowflake falling special effects". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.