Pure css achieves particle effect, css implements Particle

Pure css achieves particle effect, css implements Particle
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

I haven't updated the CSS3 martial arts series for a long time. An article stranded half a year ago gave the New Year's weather a debut. I will study how css (sass) is used to achieve particle effect, it mainly uses box-shadow to generate particles and uses css3 animation and translateZ to implement animation.

------------------------------------------------------------

-- I participated in the blog Star Selection. If you like my blog, please vote. Your support is the source of my motivation. Let's get started!

Bytes -----------------------------------------------------------------------------------------

View results first

Analysis of ideas

1. box-shadow generates particles and assigns random positions and colors to them. It is implemented using sass's for loop and random.

2. animation implementation.

3. transform 3d implements deep animation, mainly using translateZ.

Implementation

Next we will implement it separately. I put the source code in codepen. Please proceed.

----------------

----------------------------------------

Click here for online research, and click here for download and favorites.

----------------------------------------

---------------

1.html is a div.

<div class="stars"></div>

2.css is the focus. We first set the global css. We use normallize and prefix free. Set html and body as follows.

$ Stars: 100; // number of particles $ depth: 300; // depth $ speed: 1 s; // animation time $ width: 1500; // width $ height: 960; // high html, body {height: 100%; overflow: hidden;} body {perspective: 340px; background: #000 url (http://img.my.csdn.net/uploads/201501/02/1420174857_3649.png) center no-repeat; background-size: 28% 30% ;}

For. stars, we set the size, position, width, height, 5px, center position, and rounded border.

.stars {  position: absolute;  top: 50%;  left: 50%;  width:5px;  height:5px;  border-radius:100%;}

Then we use box-shadow to generate particles. Box-shadow is a very interesting feature. The generated results are as follows.

. Stars {position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 100%; /* box-shadow generates particles */$ box-shadow: (); @ for $ I from 0 through $ stars {$ box-shadow: $ box-shadow, (random ($ width)-$ width/2 + px) (random ($ height)-$ height/2 + px) adjust-hue (# ff0000, random (360);} box-shadow: $ box-shadow ;}

Then the number is a little small, and the sense of parallelism is insufficient. We use the before and: after pseudo objects to handle these tasks.

. Stars {position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 100%; $ box-shadow :(); @ for $ I from 0 through $ stars {$ box-shadow: $ box-shadow, (random ($ width)-$ width/2 + px) (random ($ height) -$ height/2 + px) adjust-hue (# ff0000, random (360);} box-shadow: $ box-shadow; /* more pseudo objects with more particles and more layers */&: before, &: after {content: ""; position: absolute; width: inherit; height: inherit; box-shadow: inherit;} &: before {transform: translateZ (-$ depth + px); opacity :. 3 ;}&: after {transform: translateZ (-$ depth * 2 + px); opacity :. 1 ;}}

Shows the effect after adding particles and depths.

Then add an animation.

. Stars {position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 100%; /* box-shadow generates particles */$ box-shadow: (); @ for $ I from 0 through $ stars {$ box-shadow: $ box-shadow, (random ($ width)-$ width/2 + px) (random ($ height)-$ height/2 + px) adjust-hue (# ff0000, random (360);} box-shadow: $ box-shadow;/* add animation */animation: fly $ speed linear infinite; transform-style: preserve-3d; /* more pseudo objects with more particles and more layers */&: before, &: after {content: ""; position: absolute; width: inherit; height: inherit; box-shadow: inherit;} &: before {transform: translateZ (-$ depth + px); opacity :. 3 ;}&: after {transform: translateZ (-$ depth * 2 + px); opacity :. 1 ;}@ keyframes fly {from {transform: translateZ (0px); opacity :. 1 ;}to {transform: translateZ ($ depth + px); opacity: 0.8 ;}}

Then, you can enjoy the effect. Finally, we will provide you with the complete css source code.

$ Stars: 100; // number of particles $ depth: 300; // depth $ speed: 1 s; // animation time $ width: 1500; // width $ height: 960; // high html, body {height: 100%; overflow: hidden;} body {perspective: 340px; background: #000 url (http://img.my.csdn.net/uploads/201501/02/1420174857_3649.png) center no-repeat; background-size: 28% 30% ;}. stars {position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 100%; $ box-shadow :(); @ for $ I from 0 through $ stars {$ box-shadow: $ box-shadow, (random ($ width)-$ width/2 + px) (random ($ height) -$ height/2 + px) adjust-hue (# ff0000, random (360);} box-shadow: $ box-shadow;/* animation: fly $ speed linear infinite; transform-style: preserve-3d; */&: before, &: after {content: ""; position: absolute; width: inherit; height: inherit; box-shadow: inherit;} &: before {transform: translateZ (-$ depth + px); opacity :. 3 ;}&: after {transform: translateZ (-$ depth * 2 + px); opacity :. 1 ;}@ keyframes fly {from {transform: translateZ (0px); opacity :. 1 ;}to {transform: translateZ ($ depth + px); opacity: 0.8 ;}}

Thank you for your patience. If you have any help, please support me!

----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------