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

Editor to share with you how to use CSS, JS to achieve romantic meteor shower animation, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

HTML

Because there are so many nodes, and I want to make it as realistic and interesting as possible, I also add random positions to the nodes. So the output of the node is controlled by JS, and only a few parent element boxes are written here in HTML, plus the corresponding ID name and class name, so the structure is relatively simple.

CSS

The difficulty of the CSS part is the style of the meteor and draw the clouds in circles, and then stack the clouds into a three-dimensional effect.

First of all, let's talk about the style of meteors:

# sky.star {position:absolute

Opacity: 0

Z-index:10000

}

.star:: after {content: "

Displaying: block

Boundary: solid; border-width:2px02px80px

/ * the meteor shrinks with length * /

Border-color: transparent rgba (255pm 255jue 1); border-radius:2px002px;transform:rotate (- 45deg); transform-origin:000

Box Shadow: 0020pxrgba (255pr. 255pr. 3)

}

First, the common style is extracted and the positioning attribute is added.

Then add a meteor after passing through the pseudo-class after the star, and draw it with boundary characteristics:

1) Model drawing: the order of border-width is four-sided top,right,bottom,left, and the same order of border-color is four-sided top,right,bottom,left. After mapping border-width to border-color, you can see that 2px is the width of a meteor, 80px is the length of a meteor, and a 0-pixel meteor is the tail of a meteor. A meteor model with a width of head 2px, a tail of 0 pixels and a length of 80px

2) slightly realistic: through the boundary radius? Add a fillet to the meteor's head to make it look more realistic, and finally rotate an angle through the roteta to make it look like it's falling.

3) increase flash: add a little halo to the meteor through box shadow to make it look like a flash.

Through the above three steps, a meteor is finished.

Then there is the painting of clouds:

Because the code of the cloud is relatively long, the only way not to paste it here is to overlay each other through a circle to complete the shape of a cloud.

After completing a cloud layer, copy one, and then multiple clouds are positioned by rotate,opacity,left, etc., to create a fade-down and superimposed stereoscopic effect.

JS

The JS section gives an example of a meteor:

SetInterval (function () {

Constobj=addChild ("# sky", "div", 2, "star"); / / insert meteor

For (leti=0;i {

Obj.parent.removeChild (obj.children [I]); / / Delete nodes at the end of animation

}

})

}

})

}

}, 1000)

Here I use two methods that I encapsulate myself, one is requestAnimationFrame-based requestAnimation and the other is appendChild-based addChild.

In order to achieve the effect of random star position, the meteor is constantly inserted and deleted by the setInterval of the timer:

First of all, add 2 meteors to the page at a time, but the interval time of the timer is less than the animation time of the meteors, which ensures that the number of meteors on the page is not a fixed value, but it must be greater than 2. Otherwise, two meteors at a time will be a little deserted.

And then, through the loop (which can also be used as an expression, change, whatever. For-the simplest) give each newly added meteor to the page a random position (top, left), random size (size), random animation execution time (timer)

Finally, in the loop, animate each newly added meteor to the page and delete the node after the animation is performed through the callback function. It should be noted here that the animation is divided into two phases (appear and disappear, mainly controlled by opacity). In addition, in my treatment here, each meteor moves the same distance 300px, which I think can also be controlled by random numbers, but I was lazy and didn't do it.

Attach the code:

HTML:

Css:

/ *-restart-* /

* {

Deposit: 0

Fill: 0

}

Html

Body {width:100%

Minimum width: 1000px

Height: 100%

Minimum height: 400px

Overflows: hidin

}

/ *-canvas-* /

.container {position:relative

Height: 100%

}

/ * Mask layer * /

# mask {position:absolute

Width: 100%

Height: 100% umbrellas rgba (0pd0j0pl 0pl .8)

Z-index:900

}

/ * Sky background * /

# sky {width:100%

Height: 100% background: linear gradient (rgba (0150,255her1), rgba (0reparting 150pence255were.8), rgba (0150pence255leg.5)

}

/ * Moon * /

# moon {position:absolute

Above: 50px

Right: 200px

Width: 120px

Height: 120px

Background: rgba (251, 255); border-radius:50%;box-shadow:0020pxrgba (251, 255, 255, and 0.5)

Z-index:9999

}

/ * twinkling stars * /

.blink {position:absolute;background:rgb (255255255); border-radius:50%;box-shadow:005pxrgb (255255255)

Opacity: 0

Z-index:10000

}

/ * Meteor * /

.star {position:absolute

Opacity: 0

Z-index:10000

}

.star:: after {content: "

Displaying: block

Boundary: solid; border-width:2px02px80px

/ * the meteor shrinks with length * /

Border-color: transparent rgba (255pm 255jue 1); border-radius:2px002px;transform:rotate (- 45deg); transform-origin:000

Box Shadow: 0020pxrgba (255pr. 255pr. 3)

}

/ * Cloud * /

.cloud {position:absolute

Width: 100%

Height: 100px

}

.cloud-1 {

Bottom:-100px

Z-index:1000

Opacity: 1

Transformation: scale (1.5)

-webkit-transform:scale (1.5)

-moz-transform:scale (1.5)

-ms-transform:scale (1.5)

-o-transform:scale (1.5)

}

.cloud-2 {

Left:-100px

Bottom:-50px

Z-index:999

Opacity:. 5

Transformations: rotation (7deg)

-webkit-transform:rotate (7deg)

-moz-transform:rotate (7deg)

-ms-transform:rotate (7deg)

-o-transform:rotate (7deg)

}

.cloud-3 {

Left:120px

Bottom:-50px

Z-index:999

Opacity:. 1Transformator (- 10deg)

-webkit-transform:rotate (- 10deg)

-moz-transform:rotate (- 10deg)

-ms-transform:rotate (- 10deg)

-o-transform:rotate (- 10deg)

}

.circle {position:absolute;border-radius:50%

Background: # fff

}

.customers-1 {width:100px

Height: 100px

Above:-50px

Left: 10px

}

.customers-2 {width:150px

Height: 150px

Above:-50px

Left: 30px

}

.clients-3 {width:300px

Height: 300px

Above:-100px

Left: 80px

}

.clients-4 {width:200px

Height: 200px

Above:-60px

Left: 300px

}

.customers-5 {width:80px

Height: 80px

Above:-30px

Left: 450px

}

.customers-6 {width:200px

Height: 200px

Above:-50px

Left: 500px

}

.customers-7 {width:100px

Height: 100px

Above:-10px

Left: 650px

}

.customers-8 {width:50px

Height: 50px

Above: 30px

Left: 730px

}

.customers-9 {width:100px

Height: 100px

Above: 30px

Left: 750px

}

.customers-10 {width:150px

Height: 150px

Above: 10px

Left: 800px

}

.customers-11 {width:150px

Height: 150px

Above:-30px

Left: 850px

}

.customers-12 {width:250px

Height: 250px

Above:-50px

Left: 900px

}

.clients-13 {width:200px

Height: 200px

Above:-40px

Left: 1000px

}

.customers-14 {width:300px

Height: 300px

Above:-70px

Left: 1100px

JS:

/ / Meteor animation

SetInterval (function () {

Constobj=addChild ("# sky", "div", 2, "star"); for (leti=0;i {

Obj.parent.removeChild (obj.children [I])

}

})

}

})

}

}, 1000)

/ / twinkle star animation

SetInterval (function () {

Constobj=addChild ("# stars", "div", 2, "blink"); for (leti=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.