今日，群友提問，如何實作這么一個 Loading 效果：
這個確實有點意思，但是這是 CSS 能夠完成的？
沒錯，這個效果中的核心氣泡效果，其實借助 CSS 中的濾鏡，能夠比較輕松的實作，就是所需的元素可能多點，參考我們之前的：
- 使用純 CSS 實作超酷炫的粘性氣泡效果
- 巧用 CSS 實作酷炫的充電影片
圓弧的實作
首先，我們可能需要實作這樣一段圓弧：
這里需要用到的技術是：
角向漸變 conic-gradient() + mask 以及兩個偽元素，圖片示意如下：
核心代碼如下圖：
<div >
<div ></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 >
<div ></div>
<ul >
<li ></li>
// ... 共 100 個 bubble 元素
<li ></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 >
<div ></div>
<ul >
<li ></li>
// ... 共 200 個 bubble 元素
<li ></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
最后
好了，本文到此結束，希望對你有幫助 ??
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550031.html
標籤：Html/Css
上一篇：前端自動化測驗之葵花寶典
下一篇：由 Base64 展開的知識探討