网站设计流程软件,做相册本哪个网站好用吗,wordpress博客 手机网页 wap,抖音开放平台申请今日#xff0c;群友提问#xff0c;如何实现这么一个 Loading 效果#xff1a; 这个确实有点意思#xff0c;但是这是 CSS 能够完成的#xff1f;
没错#xff0c;这个效果中的核心气泡效果#xff0c;其实借助 CSS 中的滤镜#xff0c;能够比较轻松的实现#xff0…今日群友提问如何实现这么一个 Loading 效果 这个确实有点意思但是这是 CSS 能够完成的
没错这个效果中的核心气泡效果其实借助 CSS 中的滤镜能够比较轻松的实现就是所需的元素可能多点。参考我们之前的
使用纯 CSS 实现超酷炫的粘性气泡效果巧用 CSS 实现酷炫的充电动画
圆弧的实现
首先我们可能需要实现这样一段圆弧 这里需要用到的技术是
角向渐变 conic-gradient() mask 以及两个伪元素。图片示意如下 核心代码如下图
div classg-containerdiv classg-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;}
}这样我们就得到了这样一个图形 气泡的实现
接下来我们来实现尾部气泡向外扩散的效果。
由于这里涉及了多个气泡的不同运动动画多个标签元素肯定是少不了了。
因此接下来我们要做的事情
我们需要多一组元素将其绝对定位到上述圆环的头部或者尾部给每个子元素随机设置多个大小不一的圆颜色保持一致给每个子元素随机设置不同方向的向外扩散的位移动画给每个子元素随机设置负的 animation-delay造成动画上的先后顺序并以此形成整个无限循环的气泡扩散动画
这里由于有许多小气泡的动画这个数量我设置成了 100。那肯定是不能一个一个手写它们的动画代码需要借助 SASS/LESS 等预处理器的循环、随机等函数。
核心代码如下
div classg-containerdiv classg-circle/divul classg-bubblesli classg-bubble/li// ... 共 100 个 bubble 元素 li classg-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) 的功能点
这样我们就得到了这样一个效果在尾部有大量气泡动画不断向外扩散的效果 借助滤镜实现粘性气泡效果
OK到这里整个效果基本就做完了。当然也是剩下最后最重要的一步需要让多个气泡之间产生一种粘性融合的效果。
这个技巧在此前非常多篇文章中也频繁提及过就是利用 filter: contrast() 滤镜与 filter: blur() 滤镜。
如果你还不了解这个技巧可以戳我的这篇文章看看你所不知道的 CSS 滤镜技巧与细节
简述下该技巧
单独将两个滤镜拿出来它们的作用分别是
filter: blur() 给图像设置高斯模糊效果。filter: contrast() 调整图像的对比度。
但是当他们“合体”的时候产生了奇妙的融合现象。 仔细看两圆相交的过程在边与边接触的时候会产生一种边界融合的效果通过对比度滤镜把高斯模糊的模糊边缘给干掉利用高斯模糊实现融合效果。
基于此我们再简单改造下我们的 CSS 代码所需要加的代码量非常少
加上滤镜 blur() 和 contrast() 形成融合粘性效果加上整个圆环的旋转即可效果加上滤镜 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);}
}就这样我们就大致还原了题图的效果 完整的代码你可以戳这里CodePen Demo -- Pure CSS Loading Animation
修复违和感
当然上面的效果乍一看还行仔细看违和感很重。
原因在于扩散出来的小球也跟着半圆环一起进行了旋转动画看上去就有点奇怪。
正确的做法应该是圆环尾部的气泡应该是原地发散消失的。
那么怎么能够做到气泡效果一直发生在圆环的尾部同时消失的时候又不跟着整个圆环一起进行旋转呢我们想要的最终效果应该是这样 这里我们可以拆解一下。想象如果去掉圆环的旋转其实我们只需要实现这样一个效果即可 整个动画的核心就转变成了如何实现这么一个效果。看似复杂其实也很好做。
首先我们重新改造一下上述的 .g-bubbles。
生成 N 个一样大小的小球元素定位在整个容器的中间
div classg-containerdiv classg-circle/divul classg-bubblesli classg-bubble/li// ... 共 200 个 bubble 元素 li classg-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%);
}得到这么一个效果所有圆形小点都暂时汇聚在容器的中心 这里需要简单解释一下 其次我们借助 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 个圆形小球形成的圆环 接下来这一步非常重要我们设定一个动画
让每个小球在动画的 75% ~ 100% 阶段做透明度从 1 到 0 的变换而 0% ~ 75% 的阶段保持透明度为 0让 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;}
}这样我们就得到了一个圆形小球气泡围绕圆环渐次消失的效果 配合上整个圆环效果就会是这样 很接近了但是没有随机的感觉气泡也没有散开的动画。解决的方案
所以我们需要让气泡在执行透明度变化的同时进行一个随机的发散位移小圆形气泡的大小也可以带上一点随机同时在动画过程逐渐缩小
当然整个动画的基础还是在容器设置了 滤镜 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;}
}只看一圈的气泡圆形我们能得到了这样的效果 配合上圆环的效果 配合上父容器的 filter: hue-rotate() 动画就能实现颜色的动态变换得到我们最终想要的效果 这样没有了第一版本的违和感整个效果也显得比较自然。
完整的代码你可以戳这里CodePen Demo -- Pure CSS Loading Animation
