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

This article is about how to use pure CSS to make a fireworks animation. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Recently, we need to do a fireworks animation on the project, which requires random size and different places. Let's see the effect first.

First, choose the appropriate animation

What kind of scene determines what kind of animation to use. For example, some relatively lightweight, decorative animation, CSS animation is enough, and some of the animation requirements of higher operational activities, creative Mini Game, etc., JS animation is definitely the first choice, if necessary, we also need to use some graphics libraries, such as Pixi.js.

Secondly, it needs to be considered from the cost of learning. Generally speaking, CSS is easier to use and costs less to get started. For dynamic effects that need to be slightly complex, you can refer directly to existing libraries, such as Animate.css. JS may be a little more complicated, native JS is fine, if it is other graphics libraries, but also need to face a completely different api, are learning costs.

Finally, engineering also needs to be considered. For example, the lottie-web itself is already very large (532k, and 43k after 150k gzip after compression). In addition, the design and export of animation json files will also be very large, so it is not cost-effective to introduce the whole lottie just for one animation. It should be done in another way.

All in all, fireworks animation can be realized by CSS.

Second, the realization of single fireworks

Here we can take the way of sequence frames to achieve. For example, I would ask the designer to export a set of sequence frame pictures, like this.

And then put these pictures together on a single picture in order, and you can use some online generation tools, such as sprite-generator, to get such a picture.

Next, you only need to use the steps () function in the CSS animation function to complete the animation frame by frame.

Suppose you have the following HTML structure

CSS is implemented as

.fireworks {position: absolute; width: 150px; height: 150px; background: url ('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat; background-size: auto 150px; animation: fireworks 1s steps (24) infinite;} @ keyframes fireworks {background-position: 100%;}}

The effect is as follows

Third, fireworks in random position

Now the fireworks appear in the same position every time, and it seems too regular and unnatural, so how to achieve the effect of being here and there for a while? Here you can add another Keyframe and change a few positions at will (it doesn't have to be really random, just look less regular)

@ keyframes random {25% {transform: translate (200%, 50%);} 50% {transform: translate (80%, 80%);} 75% {transform: translate (20%, 60%);}}

And then combine the two animations.

.fireworks {/ * other * / animation: fireworks 1s steps (24) infinite, random 4s infinite;}

The effect is as follows

Isn't it a strange animation? The reason is that there is a smooth transition when changing the position, so this place also needs to add steps (). Note that only steps (1) is needed here, which means that the process ends when you jump to the specified Keyframe, and other frames are not automatically created on the way.

.fireworks {/ * other * / animation: fireworks 1s steps (24) infinite, random 4s steps (1) infinite;}

The effect is as follows

Isn't that much more natural?

4. Fireworks of random size

There is a random position, now add a little size change, just add scale to the position change.

@ keyframes random {25% {transform: translate (200%, 50%) scale;} 50% {transform: translate (80%, 80%) scale (1.2);} 75% {transform: translate (20%, 60%) scale (0.65);}}

The effect is as follows

Such a random position and random size fireworks are completed.

5. Multiple fireworks bloom randomly

A single firework is always a bit monotonous, now add a few more, because now a single fireworks will appear in four different locations, so do not need too much HTML structure, each give a different location

The effect is as follows

Four appear together, which is too neat, so we need to add some delay animation-delay stagger occurrence time.

In this way, we get the effect at the beginning of the article.

The complete code can access CSS fireworks (codepen.io)

6. Colorful fireworks

Design students think that white is a little too monotonous, want to change the color, such as yellow? Since we have made a sequence of pictures, it is impossible to generate a set of pictures of yellow fireworks, so the question is, how to change the color through CSS?

Here we have to take a look at CSS Mask. The previous articles on Mask have introduced many practical cases, but we won't introduce much here. If you are not familiar with mask, you can refer to this inn storybook: CSS Mask CSS3 mask/masks detailed introduction "Zhang Xinxu-Xin Space-Xin Life (zhangxinxu.com)"

Just a little change is needed, using the original background as the masking background, as follows

.fireworks {/ * other styles * / background: # FFEFAD;-webkit-mask: url ('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;-webkit-mask-size: auto 150px;} @ keyframes fireworks {to {- webkit-mask-position: 100%;}})

The effect is as follows

Further, you can add color change animation, such as yellow → red → purple → cyan, and then define a Keyframe

}. Fireworks {/ * other styles * / animation: fireworks 2s steps (24) infinite, random 8s steps (1) infinite, random_color 1s infinite;} @ keyframes random_color {0% {background-color: # ffefad;} 25% {background-color: # ffadad;} 50% {background-color: # aeadff;} 75% {background-color: # adffd9 }}

You can get the following results

Has it become colorful? The complete code can access CSS fireworks colors (codepen.io)

VII. Downgrade treatment under IE

Modern browsers basically support mask masking, but IE does not, so it becomes like this under IE.

Therefore, it needs to be degraded under IE, instead of being colorful, it only needs to bloom randomly.

So how do you distinguish between IE browsers and modern browsers? In fact, you can use some selectors that are not supported by IE, such as default

Fireworks {background: url ('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat; background-size: auto 150px;} / * the following modern browsers support * / _: default, .fireworks {- webkit-mask: url (' https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;-webkit-mask-size: auto 150px;} VIII) Animation and user experience

Appropriate animation can improve the user experience, but not all users like animation, especially some decorative animation, may feel gaudy, may feel distracted, may be in order to save electricity, and even some animations may cause adverse reactions to users. For this reason, the choice should be given to the user, who does not feel the need to turn off the animation directly in the system.

At present, most operating systems can turn off unnecessary animation.

In Windows 10: setup > easy to get > Show > Show Animation in Windows.

In Windows 7: control Panel > easy access > make it easier for your computer to view > turn off unnecessary animation.

In MacOS: system preference > auxiliary use > display > weakening dynamic effect.

On iOS: setting > General > Auxiliary > weakening dynamic effect.

On Android 9 +: set up > accessibility > remove animation.

Correspondingly, CSS can check whether the animation weakening function is enabled by querying prefers-reduced-motion through the media.

So, you can add another CSS like this.

@ media screen and (prefers-reduced-motion) {/ * disable unnecessary animation * / .fireworks {animation: none;}}

The effect is as follows (take macOS as an example)

Thank you for reading! On "how to use pure CSS to do a fireworks animation" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

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.