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

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

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.