1. 首頁 > 生活百科 > >

分享10個純 CSS 實現的 Loading 效果( 二 )

小知識it知識

inset:0 100% 0 0; 右邊內縮 100%， 所以在 keyframes 部分需要將 inset 設置為 0 。
7. 珠鏈加載

分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-7"></div>.progress-7 { width:120px; height:24px; -webkit-mask: radial-gradient(circle closest-side,#000 94%,#0000) 0 0/25% 100%, linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat; background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd; animation:p7 2s infinite linear;}@keyframes p7 { 100% {background-size:100%}}遮罩 -webkit-mask 中 radial-gradient 是將寬度四等份， 每份以最小 closest-side 的邊為直徑畫圓 。
8. 斑馬線加載
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-8"></div>.progress-8 { width:60px; height:60px; border-radius: 50%; -webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%; background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd; animation:p8 2s infinite steps(7);}@keyframes p8 { 100% {background-size:100% 115%}}對 linear-gradient 描繪的角度做調整， 再加上蒙版 。
9. 水柱加載
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-9"></div>.progress-9 { --r1: 154%; --r2: 68.5%; width:60px; height:60px; border-radius: 50%; background: radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center left, radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%) center center, radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center right, #ccc; background-size: 50.5% 220%; background-position: -100% 0%,0% 0%,100% 0%; background-repeat:no-repeat; animation:p9 2s infinite linear;}@keyframes p9 { 33% {background-position: 0% 33% ,100% 33% ,200% 33% } 66% {background-position: -100% 66%,0% 66% ,100% 66% } 100% {background-position: 0% 100%,100% 100%,200% 100%}}radial-gradient 畫出水平面的波動， 就三個圓 。 var(--r1) 直接調用定義好的屬性值 。 技能 get ...
10. 信號加載
分享10個純 CSS 實現的 Loading 效果

文章插圖

<div class="progress-10"></div>.progress-10 { width:120px; height:60px; border-radius:200px 200px 0 0; -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%); background: radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat #ddd; animation:p10 2s infinite steps(6);}@keyframes p10 { 100% {background-size:120% 120%}}用 repeating-radial-gradient 方法畫出環狀的蒙版遮罩 。 radial-gradient 從底部向上圓形漸變填充 。
Uha， 看了這么多騷操作， 你學廢了嗎？
原文地址：https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA
（學習視頻分享：web前端）
以上就是分享10個純 CSS 實現的 Loading 效果的詳細內容， 更多請關注電腦自學網其它相關文章！
【分享10個純 CSS 實現的 Loading 效果】

推薦閱讀