Maison > Article > interface Web > Peu connu ! Utilisez CSS pour créer un effet aurore
Cet article vous expliquera comment utiliser CSS pour obtenir l'effet d'aurore. Les principales étapes incluent le dessin d'un arrière-plan sombre, l'utilisation de dégradés pour dessiner le contour de l'aurore, la rotation et l'étirement, ainsi que d'autres problèmes connexes, j'espère. utile à tout le monde.
Est-il possible d'obtenir Aurora en utilisant CSS ?
Comme ça :
emmm, c'est un peu gênant. Cependant, je l'ai essayé récemment. Bien qu'il soit impossible de simuler un effet aussi réaliste, vous pouvez toujours utiliser CSS pour créer des effets spéciaux similaires. Aujourd'hui, nous allons l'essayer ensemble.
Après avoir observé quelques images d'aurores, j'ai découvert certains des éléments les plus importants dans l'animation des aurores :
Dégradé de couleurs lumineux basé sur un fond sombre
Un effet d'animation similaire à l'écoulement des vagues d'eau
Lumineux Nous pouvons utiliser Gradient pour simuler autant que possible les couleurs dégradées. Quant à l'effet d'animation des vagues d'eau, le filtre SVG feturbulence est spécialement conçu pour cela. L'utilisation de ce filtre a été mentionnée à plusieurs reprises dans plusieurs de mes articles précédents.
En plus des dégradés et des filtres <feturbulence></feturbulence>
de SVG, nous pouvons également utiliser des <feturbulence></feturbulence>
滤镜之外,我们可能还会用到混合模式(mix-blend-mode
)、CSS 滤镜等提升效果。
OK,有了大概的思路后,剩下的就是不断的尝试。
首先,我们可能需要一个深色的背景,用于表示我们的夜空。同时点缀一些星星,星星可以使用 box-shadow
模拟,这样,一副夜空背景我们可以在 1 个 p 内完成:
<p class="g-wrap"> </p>
@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); }
这一步比较简单,借助了 SASS 之后,我们能够得到这样一幅夜空背景图:
接下来,就是利用渐变,画出极光的一个轮廓效果。
其实就是一个径向渐变:
<p class="g-wrap"> <p class="g-aurora"></p> </p>
.g-aurora { width: 400px; height: 300px; background: radial-gradient( circle at 100% 100%, transparent 45%, #bd63c1 55%, #53e5a6 65%, transparent 85% ); }
目前看来,是有一点点轮廓了。下一步,我们把得到的这个渐变效果通过旋转拉伸变换一下。
.g-aurora { ... transform: rotate(45deg) scaleX(1.4); }
我们大概就能得到这样一个效果:
到这里,其实雏形已经出来了。但是颜色看着不太像,为了和深色的背景融合在一起,这里我们运用上混合模式 mix-blend-mode
。
.g-aurora { ... transform: rotate(45deg) scaleX(1.4); mix-blend-mode: color-dodge; }
神奇的事情发生了,看看效果:
整体的颜色看上去更加像极光的颜色。
接下来,我们要产生水纹波动的效果,需要借助 SVG 的 <feturbulence></feturbulence>
滤镜
我们添加一个 SVG 的 <feturbulence></feturbulence>
滤镜,利用 CSS filter
进行引用
<p class="g-wrap"> <p class="g-aurora"></p> </p>
.g-aurora { ... transform: rotate(45deg) scaleX(1.4); mix-blend-mode: color-dodge; filter: url(#wave); }
我们即可得到这样一种效果:
Wow,是不是已经很有那种感觉了。通过 feturbulence 的特性,我们近乎模拟出了极光的效果!
最后一步,我们就需要让我们的极光动起来。由于 SVG 动画本身不支持类似 animation-fill-mode: alternate
这种特性。我们还是需要写一点 JavaScript 代码,控制动画的整体循环。
大概的代码是这样:
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);
至此,我们就得到了一幅完整的,会动的极光动画:
渐变元素的周围会存在明显的边界毛刺效果,可以使用黑色内阴影 box-shadow: inset ...
modes de mélange
mix-blend-mode
), des filtres CSS et bien plus encore pour améliorer l'effet. box-shadow
. De cette façon, nous pouvons réaliser un fond de ciel nocturne en 1 p : 🎜rrreeerrreee🎜Cette étape est relativement simple. Avec l'aide de SASS, nous pouvons obtenir une telle image de fond de ciel nocturne : 🎜🎜 🎜mix-blend-mode
. 🎜rrreee🎜 Quelque chose de magique s'est produit, regardez l'effet : 🎜🎜🎜<feturbulence></feturbulence>
de SVG🎜🎜Nous ajoutons un Filtre SVG <feturbulence></feturbulence>
, utilisant CSS filter
pour référencer 🎜rrreeerrreee🎜Nous pouvons obtenir un tel effet : 🎜🎜🎜🎜Wow, tu ne ressens pas déjà ça ? Grâce aux caractéristiques de la féturbulence, on peut presque simuler l’effet d’une aurore ! 🎜animation-fill-mode: alternate
. Il nous reste encore à écrire un peu de code JavaScript pour contrôler la boucle globale de l'animation. 🎜🎜Le code approximatif est le suivant : 🎜rrreee🎜À ce stade, nous avons une animation d'aurore complète et en mouvement : 🎜🎜
box-shadow: inset ...
🎜🎜🎜🎜Les paramètres réels de chaque attribut dans le processus d'écriture réel semblent simples, il a en fait été obtenu après un débogage constant au cours du processus ;🎜Le mode de fusion et le filtre de féturbulence SVG sont difficiles à maîtriser et nécessitent une pratique constante et un débogage constant. La sélection des couleurs d'Aurora dans cet article n'a pas subi trop de débogage répété. Si vous êtes prêt à y consacrer du temps, vous pouvez déboguer. la couleur avec un meilleur effet.
L'effet final n'est pas parfait, mais cela reste un bon travail CSS + SVG. Vous pouvez voir le code complet ici :
(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!