返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何用css做极光效果
  • 582
分享到

如何用css做极光效果

2024-04-02 19:04:59 582人浏览 薄情痞子
摘要

今天小编给大家分享一下如何用CSS做极光效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

今天小编给大家分享一下如何用CSS做极光效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

使用 CSS 可以实现极光吗

像是这样:

如何用css做极光效果

emmm,这有点难为人了。不过,最近我也尝试着去试了下,虽然不可能模拟出那么真实的效果,但是使用 CSS 还是可以作出类似的一些特效的,今天我们就一起来尝试下。

观察了一些极光的图片之后,我发现了极光动画中一些比较重要的元素:

  1. 基于深色背景的明亮渐变色彩

  2. 类似于水波流动的动画效果

明亮渐变色彩我们可以尽量使用 渐变 模拟。而水波流动的动画效果,在 SVG 滤镜中 feturbulence 就是专门干这个的,这个滤镜的使用在我过去的多篇文章中也有反复的提及过。

而除了渐变、SVG 的 <feturbulence> 滤镜之外,我们可能还会用到混合模式mix-blend-mode)、CSS 滤镜等提升效果。

OK,有了大概的思路后,剩下的就是不断的尝试。

Step 1. 绘制深色背景

首先,我们可能需要一个深色的背景,用于表示我们的夜空。同时点缀一些星星,星星可以使用 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 之后,我们能够得到这样一幅夜空背景图:

如何用css做极光效果

Step 2. 使用渐变画出极光的轮廓

接下来,就是利用渐变,画出极光的一个轮廓效果。

其实就是一个径向渐变:

<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%
    );
}

如何用css做极光效果

Step 3. 旋转拉伸

目前看来,是有一点点轮廓了。下一步,我们把得到的这个渐变效果通过旋转拉伸变换一下。

.g-aurora {
    ...
    transfORM: rotate(45deg) scaleX(1.4);
}

我们大概就能得到这样一个效果:

如何用css做极光效果

Step 4. 神奇的混合模式变换!

到这里,其实雏形已经出来了。但是颜色看着不太像,为了和深色的背景融合在一起,这里我们运用上混合模式 mix-blend-mode

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

神奇的事情发生了,看看效果:

如何用css做极光效果

image

整体的颜色看上去更加像极光的颜色。

Step 5. 叠加 SVG feturbulence 滤镜

接下来,我们要产生水纹波动的效果,需要借助 SVG 的 <feturbulence> 滤镜

我们添加一个 SVG 的 <feturbulence> 滤镜,利用 CSS filter 进行引用

<p class="g-wrap">
  <p class="g-aurora"></p>
</p>

<svg id='blob' version='1.1' xmlns='Http://www.w3.org/2000/svg'>
    <defs>
        <filter id='wave'>
            <feturbulence basefrequency='0.003 0.003 id='turbulence' numoctaves='3' result='noise' seed='10' />
            <fedisplacementmap id='displacement' in2='noise' in='SourceGraphic' scale='96' />
        </filter>
    </defs>
</svg>
.g-aurora {
    ...
    transform: rotate(45deg) scaleX(1.4);
    mix-blend-mode: color-dodge;
    filter: url(#wave);
}

我们即可得到这样一种效果:

如何用css做极光效果

Wow,是不是已经很有那种感觉了。通过 feturbulence 的特性,我们近乎模拟出了极光的效果!

Step 6. 让极光动起来

最后一步,我们就需要让我们的极光动起来。由于 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);

至此,我们就得到了一幅完整的,会动的极光动画:

如何用css做极光效果

一些技巧及其他事项

  1. 渐变元素的周围会存在明显的边界毛刺效果,可以使用黑色内阴影 box-shadow: inset ... 去除;

  2. 实际行文过程中的各个属性的实际参数看似简单,过程中其实经过了不断的调试才得到;

  3. 混合模式及 SVG 的 feturbulence 滤镜比较难掌握,需要不断的练习,不断的调试;本文极光的颜色选取没有经过太多反复调试,愿意花时间,可以调试出效果更好的颜色。

以上就是“如何用css做极光效果”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网JavaScript频道。

--结束END--

本文标题: 如何用css做极光效果

本文链接: https://www.lsjlt.com/news/88845.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何用css做极光效果
    今天小编给大家分享一下如何用css做极光效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。...
    99+
    2024-04-02
  • 如何使用CSS实现极光效果
    小编给大家分享一下如何使用CSS实现极光效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!像是这样:emmm,这有点难为人了。不...
    99+
    2024-04-02
  • css如何实现聚光灯效果
    这篇文章将为大家详细讲解有关css如何实现聚光灯效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   简介   CSSVariables,一个并不是那么新的东西,但...
    99+
    2024-04-02
  • 如何使用CSS实现发光的按钮效果
    这篇“如何使用CSS实现发光的按钮效果”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“如何使用CSS实现发光的按钮效果”,小编整理了以下知识点,请大家跟着小编的...
    99+
    2024-04-02
  • 如何使用CSS制作光线效果的文字
    在网页设计和开发中,文字效果是一种常见且重要的元素。其中,光线效果的文字可以为网页增添一种神秘、炫酷的感觉。本文将为大家介绍如何使用CSS制作光线效果的文字,并提供具体的代码示例。首先,我们需要创建一个包含文字的HTML元素。比如,我们可以...
    99+
    2023-10-21
    CSS 光线效果 文字制作
  • CSS中如何设置字体发光效果
    这篇文章将为大家详细讲解有关CSS中如何设置字体发光效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 在CSS中,可以利用te...
    99+
    2024-04-02
  • 如何使用css制作流星旋转光环效果
    这篇文章主要介绍“如何使用css制作流星旋转光环效果”,在日常操作中,相信很多人在如何使用css制作流星旋转光环效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用cs...
    99+
    2024-04-02
  • CSS如何实现图片高亮光弧效果
    这篇文章主要介绍了CSS如何实现图片高亮光弧效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 CSS3实现的一个高亮光弧效果,当鼠标ho...
    99+
    2024-04-02
  • CSS动画:如何实现元素的闪光效果
    CSS动画:如何实现元素的闪光效果,需要具体代码示例在网页设计中,动画效果有时可以为页面带来很好的用户体验。而闪光效果是一种常见的动画效果,它可以使元素更加引人注目。下面将介绍如何使用CSS实现元素的闪光效果。一、闪光的基本实现首先,我们需...
    99+
    2023-11-21
    动画 CSS 闪光
  • Div如何实现太极效果
    这篇文章主要介绍了Div如何实现太极效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。利用div+css实现简单的太极效果<style...
    99+
    2024-04-02
  • Android如何实现流光和光影移动效果
    这篇文章将为大家详细讲解有关Android如何实现流光和光影移动效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。概述:开发过程中,看到有些界面用到一道光线在屏幕中掠过的效果,觉得挺炫的。所以查找相关资料...
    99+
    2023-06-22
  • CSS里如何做图片点击有框的效果
    这篇文章主要讲解了“CSS里如何做图片点击有框的效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS里如何做图片点击有框的效果”吧! ...
    99+
    2024-04-02
  • 如何使用css filter的drop-shadow()函数创建线条光影效果
    如何使用css filter的drop-shadow()函数创建线条光影效果,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。下面将介绍一种利用 ...
    99+
    2024-04-02
  • 怎么利用CSS制作一个聚光灯效果
    今天小编给大家分享一下怎么利用CSS制作一个聚光灯效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2024-04-02
  • 如何用css的cubic-bezier函数做出动态缓冲效果
    这篇文章主要介绍“如何用css的cubic-bezier函数做出动态缓冲效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何用css的cubic-bezier函数做出动态缓冲效果”文章能帮助大家解...
    99+
    2023-06-27
  • ppt如何做出叠层效果
    这篇文章将为大家详细讲解有关ppt如何做出叠层效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。ppt做出叠层效果的方法:首先打开PPT,建立空白演示文稿;然后插入文本框,输入一个文字;接着把文字填充色设...
    99+
    2023-06-15
  • CSS如何实现点赞效果心形效果
    小编给大家分享一下CSS如何实现点赞效果心形效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! CSS实现点赞效果心形效果 <!DOCTYPE html> <htm...
    99+
    2024-04-02
  • 如何运用CSS3动画实现高亮光弧效果
    小编给大家分享一下如何运用CSS3动画实现高亮光弧效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码如下:<!Doct...
    99+
    2024-04-02
  • 用css如何实现跑马光
    本篇内容主要讲解“用css如何实现跑马光”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“用css如何实现跑马光”吧!用css实现跑马光效果的方法:1、创建一个div边框,代码为“<div c...
    99+
    2023-07-05
  • 如何使用CSS实现斜线效果
    本篇内容主要讲解“如何使用CSS实现斜线效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用CSS实现斜线效果”吧!如何使用单个标签,实现下图所示的斜线效...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作