How to use animation attribute to realize the special effect of snowflake falling in CSS3
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.
