How to use css3+js to realize the Animation effect of fireworks
This article mainly shows you "how to use css3+js to achieve the animation effect of fireworks", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use css3+js to achieve the animation of fireworks" this article.
Each fireworks is assigned a random starting position along the line at the bottom of the site. It also assigns a random target in the marked area. As the fireworks approaches its target point, it shrinks to invisible (0x0 pixels).
At this point, the flare becomes visible. These are actually a series of DIV pointing outward radially, with a color at the outward tip-like a matchstick. In order to simulate the explosion, they just increased the length to make the light move outward.
JavaScript is used to:
1. Add all necessary elements to the page (DOM)
2. Create and assign keyframes to each fireworks tube; and
3. Specify the color and rotate each spot to the correct position.
Code example:
Html Code:
Fireworks bloom
Css Code (css-fireworks.css)
@-webkit-keyframesexplosion {
From {
Width:0
Opacity:0
}
33% {
Width:0
Opacity:0
}
34% {
Width:10px
Opacity:1.0
}
40% {
Width:80px
Opacity:1.0
}
To {
Width:90px
Opacity:0
}
}
@-moz-keyframesexplosion {
From {
Width:0
Opacity:0
}
33% {
Width:0
Opacity:0
}
34% {
Width:10px
Opacity:1.0
}
40% {
Width:80px
Opacity:1.0
}
To {
Width:90px
Opacity:0
}
}
# stage {
Position:relative
Width:600px
Height:400px
Margin:100pxauto
Background:#000url (img/outerspace.jpg)
}
.launcher {
Position:absolute
-webkit-animation-duration:4s
-webkit-animation-iteration-count:infinite
-moz-animation-duration:4s
-moz-animation-iteration-count:infinite
Background:red
Border-bottom:3pxsolidyellow
}
.launcherdiv {
Position:absolute
Opacity:0
-webkit-animation-name:explosion
-webkit-animation-duration:4s
-webkit-animation-iteration-count:infinite
-moz-animation-name:explosion
-moz-animation-duration:4s
-moz-animation-iteration-count:infinite
Left:3px
Top:3px
Width:10px
Height:4px
Border-right:4pxsolidyellow
Border-radius:2px
-webkit-transform-origin:00
-moz-transform-origin:00
}
Js Code (css-fireworks.js)
Document.addEventListener ("DOMContentLoaded", function () {
Varnum_launchers=12
Varnum_flares=20
Varflare_colours= ['red','aqua','violet','yellow','lightgreen','white','blue']
VarcssIdx=document.styleSheets.length-1
FunctionmyRandom (from,to)
{
Returnfrom+Math.floor (Math.random () * (to-from))
}
Varkeyframes_template= "from {left:LEFTFROM%;top:380px;width:6px;height:12px;}\ n"
+ "33% {left:LEFTTOP%;top:TOPTOPpx;width:0;height:0;}\ n"
+ "to {left:LEFTEND%;top:BOTBOTpx;width:0;height:0;}"
For (vari=0;i
