在上一篇文章中 -- 《涨姿势了,有意思的粘性气泡 Loading效果》,我们利用滤镜 blur()
和 contrast()
,实现了这么个 Loading 效果:
完整的代码,你可以戳这里:CodePen Demo -- Pure CSS Loading Animation[1]
由于本篇文章与上篇文章强关联,强烈建议,还没阅读上篇文章的,先阅读一下再继续往下: 《涨姿势了,有意思的粘性气泡 Loading效果》
上面的效果,乍一看还行,仔细看,违和感很重。
原因在于,扩散出来的小球也跟着半圆环一起进行了旋转动画,看上去就有点奇怪。
正确的做法应该是,圆环尾部的气泡应该是原地发散消失的。
那么,怎么能够做到气泡效果,一直发生在圆环的尾部,同时消失的时候又不跟着整个圆环一起进行旋转呢?我们想要的最终效果,应该是这样:
这里,我们可以拆解一下。想象,如果去掉圆环的旋转,其实我们只需要实现这样一个效果即可:
整个动画的核心就转变成了如何实现这么一个效果。看似复杂,其实也很好做。
首先,我们重新改造一下上述的 .g-bubbles
。
<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%);
}
得到这么一个效果,所有圆形小点,都暂时汇聚在容器的中心:
这里需要简单解释一下:
其次,我们借助 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@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[2]
好了,本文到此结束,希望对你有帮助 :)
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
CodePen Demo -- Pure CSS Loading Animation: https://codepen.io/Chokcoco/pen/xxybQYY?editors=0100
[2]CodePen Demo -- Pure CSS Loading Animation: https://codepen.io/Chokcoco/pen/zYmvzdB
[3]Github -- iCSS: https://github.com/chokcoco/iCSS
如果觉得还不错,欢迎点赞、收藏、转发❤❤