공유 10 순수 CSS를 사용하여 구현된 로딩 효과-CSS 튜토리얼-php.cn

로딩이 발생하면 UI 프레임워크에 내장되어 있거나 Baidu에 내장되어 있고 프로젝트에 CV가 추가되나요? 그러나 직접 구현해 보면 전혀 알 수 없습니다. 이 기사에서는 순수 CSS로 구현된 10가지 로딩 효과를 공유하겠습니다. 도움이 되길 바랍니다.

공유 10 순수 CSS를 사용하여 구현된 로딩 효과

Afif가 Twitter에서 소개한 10가지 로드 효과를 확인하세요. 위에 표시된 것처럼. 네, 훌륭하고 실용적이어서 녹음해봤습니다. Loading 效果。如上图。

Yeah，很赞哦，挺实用的，遂记录下来。

为保证运行正常，咱先规定下：

* {
  box-sizing: border-box;
}

로그인 후 복사

1. 平滑加载

공유 10 순수 CSS를 사용하여 구현된 로딩 효과

<div class="progress-1"></div>

로그인 후 복사

.progress-1 {
  width:120px;
  height:20px;
  background:
   linear-gradient(#000 0 0) 0/0% no-repeat
   #ddd;
  animation:p1 2s infinite linear;
}
@keyframes p1 {
    100% {background-size:100%}
}

로그인 후 복사

linear-gradient(#000 0 0) 你可以理解为 linear-gradient(#000 0 100%)，如果还不熟悉，复制 linear-gradient(#000 0 50%, #f00 50% 0) ，替换原先的部分跑一下。觉得 linear-gradient(#000 0 0) 别扭的话，直接写 #000 即可。【推荐学习：css视频教程】
0/0% 是 background-position: 0;/background-size: 0; 的简写。

2. 按步加载

공유 10 순수 CSS를 사용하여 구현된 로딩 효과

<div class="progress-2"></div>

로그인 후 복사

.progress-2 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   linear-gradient(orange 0 0) 0/0% no-repeat
   lightblue;
  animation:p2 2s infinite steps(10);
}
@keyframes p2 {
    100% {background-size:110%}
}

로그인 후 복사

steps(10) 是 step(10, end) 的简写，指明刚开始没有，所以有第2点的处理
100% {background-size:110%} 添加多一个 step 的百分比，上面的 step 是 10，所以是100% + (1/10)*100% = 110%

3. 条纹加载

공유 10 순수 CSS를 사용하여 구현된 로딩 효과

<div class="progress-3"></div>

로그인 후 복사

.progress-3 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat,
   repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%;
  animation:p3 2s infinite;
}
@keyframes p3 {
    100% {background-size:100%}
}

로그인 후 복사

repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; 画出灰色的斑马线条纹，repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat 则是进度条加载的条纹。

4. 虚线加载

공유 10 순수 CSS를 사용하여 구현된 로딩 효과

<div class="progress-4"></div>

로그인 후 복사

.progress-4 {
  width:120px;
  height:20px;
  -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
  background:
   linear-gradient(#000 0 0) 0/0% no-repeat
   #ddd;
  animation:p4 2s infinite steps(6);
}
@keyframes p4 {
    100% {background-size:120%}
}

로그인 후 복사

-webkit-mask 默认有值 repeat，不然遮罩不会有五个。

5. 电池加载

공유 10 순수 CSS를 사용하여 구현된 로딩 효과

<div class="progress-5"></div>

로그인 후 복사

.progress-5 {
  width:80px;
  height:40px;
  border:2px solid #000;
  padding:3px;
  background: 
    repeating-linear-gradient(90deg,#000 0 10px,#0000 0 16px) 
    0/0% no-repeat content-box content-box;
  position: relative;
  animation:p5 2s infinite steps(6);
}
.progress-5::before {
  content:"";
  position: absolute;
  top: 50%;
  left:100%;
  transform: translateY(-50%);
  width:10px;
  height: 10px;
  border: 2px solid #000;
}
@keyframes p5 {
    100% {background-size:120%}
}

로그인 후 복사

原作者对 .progress-5::before 伪元素实现如下：

.progress-5::before {
  content:"";
  position: absolute;
  top:-2px;
  bottom:-2px;
  left:100%;
  width:10px;
  background:
    linear-gradient(
        #0000   calc(50% - 7px),#000 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),#000 0 calc(50% + 7px),#0000 0) left /100% 100%,
    linear-gradient(#000 calc(50% - 5px),#0000 0 calc(50% + 5px),#000 0) left /2px 100%,
    linear-gradient(#0000 calc(50% - 5px),#000 0 calc(50% + 5px),#0000        0) right/2px 100%;
  background-repeat:no-repeat;
}

로그인 후 복사

#0000 是透明，同等 transparent

6. 内嵌加载

这名字起得有些不贴切，不过不重要，读者看图自然理解。

공유 10 순수 CSS를 사용하여 구현된 로딩 효과

<div class="progress-6"></div>

로그인 후 복사

.progress-6 {
  width:120px;
  height:22px;
  border-radius: 20px;
  color: #514b82;
  border:2px solid;
  position: relative;
}
.progress-6::before {
  content:"";
  position: absolute;
  margin:2px;
  inset:0 100% 0 0;
  border-radius: inherit;
  background: #514b82;
  animation:p6 2s infinite;
}
@keyframes p6 {
    100% {inset:0}
}

로그인 후 복사

inset:0 100% 0 0; 右边内缩 100%，所以在 keyframes 部分需要将 inset 设置为 0。

7. 珠链加载

공유 10 순수 CSS를 사용하여 구현된 로딩 효과

<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를 사용하여 구현된 로딩 효과

<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를 사용하여 구현된 로딩 효과

<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를 사용하여 구현된 로딩 효과

<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

정상적인 작동을 보장하기 위해 먼저 다음 사항을 규정합니다.

rrreee

1. 원활한 로딩

rrreeerrreee

linear-gradient(#000 0 0) linear-gradient(#000 0 100%)로 이해하시면 됩니다. 아직 익숙하지 않다면 linear-gradient(#000 0 50%, #f00 50% 0), 원래 부분을 교체하고 실행해 보세요. linear-gradient(#000 0 0)가 어색하다고 느끼신다면 #000만 써주세요. [추천 학습: css 동영상 튜토리얼
]🎜

🎜 0/0%는 배경 위치: 0;/배경 크기: 0;의 약어입니다. 🎜

2. 단계별 로딩
🎜🎜rrreeerrree

🎜 steps(10)는 step(10, end)의 약어로 처음에는 단계가 없어 🎜point 2🎜🎜의 처리가 있음을 나타냅니다.

🎜100% {ground-size:110%}는 단계 비율을 하나 더 추가합니다. 위의 단계는 10이므로 예 100% + (1/10)*100% = 110%🎜

3. 스트라이프 로딩
🎜🎜rrreeerrreee🎜 repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; 회색 얼룩말 줄무늬를 그립니다. 반복 선형 -gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat는 진행률 표시줄 로딩의 스트라이프입니다. 🎜
4. 대시 로드
🎜🎜rrreeerrreee🎜-webkit-mask에는 기본적으로 repeat 값이 있습니다. 그렇지 않으면 마스크가 작동하지 않습니다. 개인이 5명 있어요. 🎜
5. 배터리 로딩
🎜🎜rrreeerrreee🎜원저자는 .progress-5::before 의사 요소를 다음과 같이 구현했습니다. 🎜rrreee🎜🎜# 0000은 투명합니다. 똑같이 투명합니다🎜

6. 인라인 로딩

🎜이 이름은 약간 부적절하지만 독자가 자연스럽게 이해할 수 있는 것은 아닙니다. 사진을 보면서. 🎜🎜 공유 10 순수 CSS를 사용하여 구현된 로딩 효과

🎜rrreeerrreee🎜 inset:0 100% 0 0; 오른쪽은 100% 들여쓰기되어 있으므로 키프레임inset을 설정해야 합니다. /code> 섹션은 0입니다. 🎜

7. 비드 체인 로딩

🎜

🎜rrreeerrreee🎜 radial-gradient의 마스크 -webkit-mask는 너비를 다음과 같이 나누는 것입니다. four 각 부분에 대해 가장 작은 가장 가까운 쪽 변을 지름으로 하여 원을 그립니다. 🎜

8. 얼룩말 횡단 로딩

🎜

🎜rrreeerrreee🎜 linear-gradient로 표시된 각도를 조정하고 마스크를 추가하세요. 🎜

9. 물기둥 로딩

🎜

🎜rrreeerrreee🎜radial-gradient 수평면에 원 3개만 요동을 그립니다. var(--r1)은 정의된 속성 값을 직접 호출합니다. 스킬 get ...🎜

10. 신호 로딩

🎜

🎜rrreeerrreee🎜 repeating-radial-gradient 메소드를 사용하여 링 마스크 마스크입니다. 방사형 그라데이션은 아래에서 위쪽으로 원형 그라데이션으로 채워집니다. 🎜🎜우하, 멋진 작전들을 많이 보고 지치셨나요? 🎜🎜🎜원본 주소: https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA🎜

(학습 영상 공유: 웹 프론트엔드)

위 내용은 공유 10 순수 CSS를 사용하여 구현된 로딩 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!