Little known! Use css to create aurora effect

WBOY
Release: 2022-02-09 17:48:01
forward
3624 people have browsed it

This article will share with you how to use CSS to achieve the aurora effect. The main steps include drawing a dark background, using gradients to draw the outline of the aurora, rotating and stretching, and other related issues. I hope it will be helpful to everyone.

Little known! Use css to create aurora effect

#Is it possible to achieve Aurorausing CSS?

Like this:

Little known! Use css to create aurora effect

emmm, this is a bit embarrassing. However, I have tried it recently. Although it is impossible to simulate such a realistic effect, you can still use CSS to create some similar special effects. Today we will try it together.

After observing some aurora pictures, I discovered some of the more important elements in aurora animation:

  1. Bright gradient colors based on dark backgrounds

  2. An animation effect similar to the flow of water waves

We can try to usegradientto simulate bright gradient colors. As for the animation effect of water waves, the SVG filterfeturbulenceis specifically designed for this. The use of this filter has been mentioned repeatedly in many of my past articles.

In addition to gradients and SVG'sfilters, we may also usemixing modes(mix-blend-mode), CSS filters, etc. to improve the effect.

OK, after you have a general idea, the rest is to keep trying.

Step 1. Draw a dark background

First, we may need a dark background to represent our night sky. At the same time, embellish some stars. The stars can be simulated usingbox-shadow. In this way, we can complete a night sky background in 1 p:

Copy after login
@function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } @function shadowSet($n, $size) { $shadow : 0 0 0 0 #fff; @for $i from 0 through $n { $x: randomNum(350); $y: randomNum(500); $scale: randomNum($size) / 10; $shadow: $shadow, #{$x}px #{$y}px 0 #{$scale}px rgba(255, 255, 255, .8); } @return $shadow; } .g-wrap { position: relative; width: 350px; height: 500px; background: #0b1a3a; overflow: hidden; &::before { content: ""; position: absolute; width: 1px; height: 1px; border-radius: 50%; box-shadow: shadowSet(100, 6); }
Copy after login

This step is relatively simple, with the help of SASS , we can get such a night sky background image:

Little known! Use css to create aurora effect

Step 2. Use gradient to draw the outline of the aurora

The next step is to use gradient to draw Create an outline effect of the aurora.

In fact, it is a radial gradient:

Copy after login
.g-aurora { width: 400px; height: 300px; background: radial-gradient( circle at 100% 100%, transparent 45%, #bd63c1 55%, #53e5a6 65%, transparent 85% ); }
Copy after login

Little known! Use css to create aurora effect

Step 3. Rotate and stretch

At present, it seems that there is a little outline . Next, we transform the obtained gradient effect by rotating and stretching it.

.g-aurora { ... transform: rotate(45deg) scaleX(1.4); }
Copy after login

We can probably get such an effect:

Little known! Use css to create aurora effect

Step 4. Magical blending mode transformation!

At this point, the prototype has actually come out. But the color doesn’t look very similar. In order to blend with the dark background, here we use the blending modemix-blend-mode.

.g-aurora { ... transform: rotate(45deg) scaleX(1.4); mix-blend-mode: color-dodge; }
Copy after login

Something magical happened, look at the effect:

Little known! Use css to create aurora effect

image

The overall color looks more like the color of the aurora.

Step 5. Overlay SVG feturbulence filter

Next, we want to produce the effect of water ripples, we need to use SVG’sfilter

We add an SVGfilter and use CSSfilterto reference

Copy after login
.g-aurora { ... transform: rotate(45deg) scaleX(1.4); mix-blend-mode: color-dodge; filter: url(#wave); }
Copy after login

We can get such an effect:

Little known! Use css to create aurora effect

Wow, don’t you already feel that way? Through the features of feturbulence, we can almost simulate the effect of aurora!

Step 6. Let the aurora move

In the last step, we need to make our aurora move. Because SVG animation itself does not support features likeanimation-fill-mode: alternate. We still need to write a little JavaScript code to control the overall loop of the animation.

The approximate code is as follows:

var filter = document.querySelector("#turbulence"); var frames = 0; var rad = Math.PI / 180; function freqAnimation() { bfx = 0.005; bfy = 0.005; frames += .5 bfx += 0.0025 * Math.cos(frames * rad); bfy += 0.0025 * Math.sin(frames * rad); bf = bfx.toString() + ' ' + bfy.toString(); filter.setAttributeNS(null, 'baseFrequency', bf); window.requestAnimationFrame(freqAnimation); } window.requestAnimationFrame(freqAnimation);
Copy after login

At this point, we have a complete, moving aurora animation:

Little known! Use css to create aurora effect

Some tips and other matters

  1. There will be obvious border burr effect around the gradient element, you can use black inner shadowbox-shadow: inset ...Remove;

  2. The actual parameters of each attribute in the actual writing process seem simple, but in fact they were obtained after continuous debugging;

  3. Mixing modes and SVG feturbulence filters are difficult to master and require constant practice and constant debugging. The color selection of Aurora in this article has not gone through too much repeated debugging. If you are willing to spend time, you can debug the effect. Better colors.

The final effect is not perfect, but it is still a good CSS SVG work. You can see the complete code here:

(Learning video sharing:css video tutorial)

The above is the detailed content of Little known! Use css to create aurora effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!