涨姿势了,有意思的气泡 Loading 效果

这篇具有很好参考价值的文章主要介绍了涨姿势了,有意思的气泡 Loading 效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今日,群友提问,如何实现这么一个 Loading 效果:

涨姿势了,有意思的气泡 Loading 效果

这个确实有点意思,但是这是 CSS 能够完成的?

没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们之前的:

  • 使用纯 CSS 实现超酷炫的粘性气泡效果
  • 巧用 CSS 实现酷炫的充电动画

圆弧的实现

首先,我们可能需要实现这样一段圆弧:

涨姿势了,有意思的气泡 Loading 效果

这里需要用到的技术是:

角向渐变 conic-gradient() + mask 以及两个伪元素。图片示意如下:

涨姿势了,有意思的气泡 Loading 效果

核心代码如下图:

<div class="g-container">
  <div class="g-circle"></div>
</div>
:root {
    --headColor: hsl(130, 75%, 75%);
    --endColor: hsl(60, 75%, 40%);
}
.g-container {
    position: relative;
    background: #000;
}
.g-circle {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: conic-gradient(
        var(--headColor) 0, 
        var(--headColor) 10%,
        hsl(120, 75%, 70%), 
        hsl(110, 75%, 65%), 
        hsl(100, 75%, 60%),
        hsl(90, 75%, 55%), 
        hsl(80, 75%, 50%),
        hsl(70, 75%, 45%),
        var(--endColor) 30%,
        var(--endColor) 35%,
        transparent 35%
    );
    mask: radial-gradient(transparent, transparent 119px, #000 120px, #000 120px, #000 100%);
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        width: 30px;
        height: 30px;
        background: var(--headColor);
        top: 0;
        left: 135px;
        border-radius: 50%;
    }
    
    &::after {
        background: var(--endColor);
        left: unset;
        top: 214px;
        right: 26px;
    }
}

这样,我们就得到了这样一个图形:

涨姿势了,有意思的气泡 Loading 效果

气泡的实现

接下来,我们来实现尾部气泡向外扩散的效果。

由于这里涉及了多个气泡的不同运动动画,多个标签元素肯定是少不了了。

因此,接下来我们要做的事情:

  1. 我们需要多一组元素,将其绝对定位到上述圆环的头部或者尾部
  2. 给每个子元素随机设置多个大小不一的圆,颜色保持一致
  3. 给每个子元素随机设置不同方向的,向外扩散的位移动画
  4. 给每个子元素随机设置负的 animation-delay,造成动画上的先后顺序,并以此形成整个无限循环的气泡扩散动画

这里,由于有许多小气泡的动画,这个数量,我设置成了 100。那肯定是不能一个一个手写它们的动画代码,需要借助 SASS/LESS 等预处理器的循环、随机等函数。

核心代码如下:

<div class="g-container">
  <div class="g-circle"></div>
  <ul class="g-bubbles">
    <li class="g-bubble"></li>
    // ... 共 100 个 bubble 元素 
    <li class="g-bubble"></li>
  </ul>
</div>
// 上面圆环的代码,保持一致,下面只补充气泡动画的代码
.g-bubbles {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    top: 100px;
    left: 235px;
    background: var(--headColor);
}

.g-bubble {
    position: absolute;
    border-radius: 50%;
    background-color: inherit;
}

@for $i from 1 through 100 { 
    .g-bubble:nth-child(#{$i}) {
        --rotate: calc(#{random(360)} * 1deg);
        --dis: calc(#{random(100)} * 1px);
        --width: calc(3px + #{random(25)} * 1px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--width);
        height: var(--width);
        animation: move #{(random(1500) + 1500) / 1000}s ease-in-out -#{random(3000) / 1000}s infinite;
    }
}

@keyframes move {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    75% {
        opacity: .9;
    }
    100% {
        transform: rotateZ(var(--rotate)) translate(-50%, var(--dis));
        opacity: .4;
    }
}

核心在于 @for $i from 1 through 100 { } 这段 SASS 代码内部,我们实现了上面说的 (2)(3)(4) 的功能点!

这样,我们就得到了这样一个效果,在尾部有大量气泡动画,不断向外扩散的效果:

涨姿势了,有意思的气泡 Loading 效果

借助滤镜实现粘性气泡效果

OK,到这里整个效果基本就做完了。当然,也是剩下最后最重要的一步,需要让多个气泡之间产生一种粘性融合的效果。

这个技巧在此前非常多篇文章中,也频繁提及过,就是利用 filter: contrast() 滤镜与 filter: blur() 滤镜。

如果你还不了解这个技巧,可以戳我的这篇文章看看:你所不知道的 CSS 滤镜技巧与细节

简述下该技巧:

单独将两个滤镜拿出来,它们的作用分别是:

  1. filter: blur(): 给图像设置高斯模糊效果。
  2. filter: contrast(): 调整图像的对比度。

但是,当他们“合体”的时候,产生了奇妙的融合现象。

涨姿势了,有意思的气泡 Loading 效果

仔细看两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。

基于此,我们再简单改造下我们的 CSS 代码,所需要加的代码量非常少:

  1. 加上滤镜 blur() 和 contrast() ,形成融合粘性效果
  2. 加上整个圆环的旋转即可效果
  3. 加上滤镜 hue-rotate(),实现色彩的变换动画
.g-container {
    // ... 保持一致
    background: #000;
    filter: blur(3px) contrast(5);
    animation: rotate 4s infinite linear;
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
        filter: blur(3px) contrast(5) hue-rotate(360deg);
    }
}

就这样,我们就大致还原了题图的效果:

涨姿势了,有意思的气泡 Loading 效果

完整的代码,你可以戳这里:CodePen Demo -- Pure CSS Loading Animation

修复违和感

当然,上面的效果,乍一看还行,仔细看,违和感很重。

原因在于,扩散出来的小球也跟着半圆环一起进行了旋转动画,看上去就有点奇怪。

正确的做法应该是,圆环尾部的气泡应该是原地发散消失的。

那么,怎么能够做到气泡效果,一直发生在圆环的尾部,同时消失的时候又不跟着整个圆环一起进行旋转呢?我们想要的最终效果,应该是这样:

涨姿势了,有意思的气泡 Loading 效果

这里,我们可以拆解一下。想象,如果去掉圆环的旋转,其实我们只需要实现这样一个效果即可:

涨姿势了,有意思的气泡 Loading 效果

整个动画的核心就转变成了如何实现这么一个效果。看似复杂,其实也很好做。

首先,我们重新改造一下上述的 .g-bubbles

  1. 生成 N 个一样大小的小球元素,定位在整个容器的中间
<div class="g-container">
  <div class="g-circle"></div>
  <ul class="g-bubbles">
    <li class="g-bubble"></li>
    // ... 共 200 个 bubble 元素 
    <li class="g-bubble"></li>
  </ul>
</div>
.g-bubbles {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border-radius: 50px;
}
.g-bubble {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: hsl(60, 75%, 40%);
}

得到这么一个效果,所有圆形小点,都暂时汇聚在容器的中心:

涨姿势了,有意思的气泡 Loading 效果

这里需要简单解释一下:

涨姿势了,有意思的气泡 Loading 效果

其次,我们借助 SASS,按照元素的顺序,把它们顺序排列到圆环轨迹之上:

$count: 200;
@for $i from 1 through $count { 
    .g-bubble:nth-child(#{$i}) {
        --rotate: calc(#{360 / $count} * #{$i} * 1deg);
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0);
        opacity: 1;
    }
}

由于我们设置了 div 小球的个数为 200 个,这样,我们就得到了一圈由 200 个圆形小球形成的圆环:

涨姿势了,有意思的气泡 Loading 效果

接下来这一步非常重要,我们设定一个动画:

  1. 让每个小球在动画的 75% ~ 100% 阶段做透明度从 1 到 0 的变换,而 0% ~ 75% 的阶段保持透明度为 0
  2. 让 200 个 div 依次进行这个动画效果(利用负的 animation-delay,从 -0 到 -4000ms),整体上就能形成逐渐消失的效果
@for $i from 1 through $count { 
    .g-bubble:nth-child(#{$i}) {
        --rotate: calc(#{360 / $count} * #{$i} * 1deg);
        --delayTime: calc(4000 * #{$i / $count} * -1ms);
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0);
        opacity: 1;
        animation: showAndHide 4000ms linear var(--delayTime) infinite;
    }
}
@keyframes showAndHide {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    75.1% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

这样,我们就得到了一个圆形小球气泡围绕圆环渐次消失的效果:

涨姿势了,有意思的气泡 Loading 效果

配合上整个圆环,效果就会是这样:

涨姿势了,有意思的气泡 Loading 效果

很接近了,但是没有随机的感觉,气泡也没有散开的动画。解决的方案:

  1. 所以我们需要让气泡在执行透明度变化的同时,进行一个随机的发散位移
  2. 小圆形气泡的大小也可以带上一点随机,同时,在动画过程逐渐缩小

当然,整个动画的基础,还是在容器设置了 滤镜 blur() 和 contrast() 的加持之下的,这样,我们给气泡再补上随机动画散开及缩放的动画:

@for $i from 1 through $count { 
    .g-bubble:nth-child(#{$i}) {
        --rotate: calc(#{360 / $count} * #{$i} * 1deg);
        --delayTime: calc(4000 * #{$i / $count} * -1ms);
        --scale: #{0.4 + random(10) / 10};
        --x: #{-100 + random(200)}px;
        --y: #{-100 + random(200)}px;
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0);
        opacity: 1;
        animation: showAndHide 4000ms linear var(--delayTime) infinite;
    }
}

@keyframes showAndHide {
    0% {
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0);
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    75.1% {
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0)
            scale(var(--scale));
        opacity: 1;
    }
    100% {
        transform: 
            rotateZ(var(--rotate)) 
            translate(calc(135px + var(--x)), var(--y))
            scale(.2);
        opacity: 0;
    }
}

只看一圈的气泡圆形,我们能得到了这样的效果:

涨姿势了,有意思的气泡 Loading 效果

配合上圆环的效果:

涨姿势了,有意思的气泡 Loading 效果

配合上父容器的 filter: hue-rotate() 动画,就能实现颜色的动态变换,得到我们最终想要的效果:

涨姿势了,有意思的气泡 Loading 效果

这样,没有了第一版本的违和感,整个效果也显得比较自然。

完整的代码,你可以戳这里:CodePen Demo -- Pure CSS Loading Animation

最后

好了,本文到此结束,希望对你有帮助 😃

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。文章来源地址https://www.toymoban.com/news/detail-412119.html

到了这里,关于涨姿势了,有意思的气泡 Loading 效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 分享两个有意思的登录界面

    1.带有浮动占位符和灯光按钮的登录界面 先上效果: 代码如下: 2.跳跃的登录字符登陆界面 先上效果: 代码如下:

    2023年04月25日
    浏览(45)
  • 分享一组有意思的按钮设计

    先上效果图: 一共16个,每个都有自己不同的样式和效果,可以用在自己的项目中,提升客户体验~ 再上代码:

    2024年02月04日
    浏览(44)
  • 第五期:字符串的一些有意思的操作

    PS:每道题解题方法不唯一,欢迎讨论!每道题后都有解析帮助你分析做题,答案在最下面,关注博主每天持续更新。 1. 替换空格 题目描述 请实现一个函数,把字符串 s 中的每个空格替换成\\\"%20\\\"。 示例1: 输入:s = “We are happy.” 输出:“We%20are%20happy.” 示例2: 输入:s =

    2024年02月08日
    浏览(56)
  • 分享一个有意思的文字飞入动画(模仿水滴融合)

    先上效果图: 代码如下:

    2024年02月01日
    浏览(47)
  • 有意思!一个关于 Spring 历史的在线小游戏

    发现 Spring One 的官网上有个好玩的彩蛋,分享给大家! 进到Spring One的官网,可以看到右下角有个类似马里奥游戏中的金币图标。 点击该金币之后,会打开一个新的页面,进入下面这样一个名为:The History Of Spring 的在线小游戏 你可以使用上下左右的方向键来控制Spring的Logo一

    2024年04月27日
    浏览(43)
  • kill 进程时遇到的一件有意思的事情

    一般来讲,我们在 kill 掉一个进程的时候通常有两个选择: 找到进程的 pid 号,然后执行 kill 命令 找到进程的名字,然后执行 pkill 命令 pkill 和 kill 命令都是向指定的进程发送信号,从而完成终结进程的操作,主要区别在于 pkill 命令与 pgrep 配套使用,能够踢出指定终端用户

    2023年04月10日
    浏览(49)
  • vue有意思的图片动画插件direction-reveal

    功能:操作简单好上头,动画特效很丝滑,有很多种供选择 导入到需要使用动画的单页面 使用样式 导入css,如果用到了scss就导入scss,用的css就导入.css文件 https://github.com/NigelOToole/direction-reveal 文章到此结束,希望对你有所帮助~

    2024年02月12日
    浏览(39)
  • 有意思,我的GitHub账号值$23806.2,快来试试你的?

    睡不着,看到一个有意思的网站: Estimate Github Worth Generator 。 它可以用来估算 GitHub 账号的价值。马上试了一下。 我的账号估值: $23806.2 操作很简单,点击Estimate Github Worth Generator,进入网站。 具体如下图: 在唯一的输入框中,输入您的GitHub账号,点击按钮 Generate Worth 按钮

    2024年02月04日
    浏览(55)
  • 码出高效_第一章 | 有意思的二进制表示及运算

    设想有8条电路,每条电路有高电平和低电平两种状态,即就有2 8 =256种不同的信号。假设其表示区间为0~255,最大数即2 8 -1。 那么32条电路能够表示最大数为(2 32 -1)=4294967295,即所谓的32位电路信号。 正负数表示: 上面的8条电路,最左侧一条表示正负:0-整数,1-负数,不

    2024年02月06日
    浏览(40)
  • rollup npm 工具包怎么做点有意思的事情

    一个 NPM 包,帮助数十万程序员提高数十倍效率,难道不开源出来?(一) 首先贴下我们的官网 【预览页】 https://kennana.github.io/toolkit-use/ 我们的推特 【toolkituse】 https://twitter.com/Toolkituse 我们的github 【toolkit-use】 https://github.com/KenNaNa/toolkit-use

    2024年02月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包