Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

Apabila kami menghadapi pemuatan, ia sama ada terbina dalam rangka kerja UI atau Baidu, dan kemudian CV ditambahkan pada projek? Walau bagaimanapun, apabila anda melaksanakannya sendiri, anda tidak akan tahu. Dalam artikel ini, saya akan berkongsi dengan anda 10 Kesan pemuatan yang dilaksanakan dalam CSS tulen Saya harap ia akan membantu anda!

Lihat sepuluh kesan yang diperkenalkan oleh T. Seperti yang ditunjukkan di atas. LoadingYa, ia hebat dan sangat praktikal, jadi saya merakamnya.

Untuk memastikan operasi normal, kami mula-mula menetapkan:

1 Pemuatan yang lancar

* {
  box-sizing: border-box;
}

<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%}
}

Anda boleh memahaminya sebagai
• Jika anda belum biasa dengannya, salin

  dan ganti bahagian asal dan jalankannya. Jika anda rasa linear-gradient(#000 0 0) janggal, tulis sahaja linear-gradient(#000 0 100%). [Pembelajaran yang disyorkan: linear-gradient(#000 0 50%, #f00 50% 0)tutorial video csslinear-gradient(#000 0 0)] #000

ialah singkatan daripada
• .

  0/0%background-position: 0;/background-size: 0;

  2 Muatkan langkah demi langkah

<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%}
}

Ya
• singkatan, menunjukkan bahawa ia tidak tersedia pada mulanya, jadi terdapat

  titik 2 steps(10) pemprosesan step(10, end)

Tambah satu peratus lagi
• ,

  di atas ialah 100% {background-size:110%}, jadi stepstep10100% (1/10)*100% = 110%

  3. Pemuatan jalur

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

Lukis jalur zebra kelabu,

.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%}
}

ialah jalur pemuatan bar kemajuan.

repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%;4. Pemuatan baris bertitik repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat

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

mempunyai nilai

.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%}
}

secara lalai, jika tidak, tidak akan ada lima topeng muka.

-webkit-mask5. Pemuatan baterirepeat

Pengarang asal melaksanakan

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

elemen pseudo seperti berikut:

.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

#0000 adalah telus, sama telus

.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;
}

6 Pemuatan sebaris

Nama ini agak tidak sesuai, tetapi ia tidak penting Pembaca dapat memahaminya secara semula jadi dengan melihat gambar.

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

diinden di sebelah kanan

.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}
}

, jadi di bahagian

anda perlu menetapkan inset:0 100% 0 0; kepada 100%. keyframesinset7. Pemuatan rantai manik0

Topeng

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

dalam

.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%}
}

adalah untuk membahagikan lebar kepada empat bahagian yang sama, setiap bahagian Lukis bulatan dengan sisi

terkecil sebagai diameter. -webkit-maskradial-gradient8. Pemuatan lintasan Zebraclosest-side

Laraskan sudut yang digambarkan oleh

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

dan tambah topeng.

.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%}
}

9. Pemuatan lajur air linear-gradient

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

Lukis turun naik satah mendatar, hanya tiga bulatan.

.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%}
}

Panggil terus nilai atribut yang ditentukan. Kemahiran

...radial-gradientvar(--r1)10 Pemuatan isyaratget

Gunakan kaedah

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

untuk melukis berbentuk cincin topeng Topeng.

.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%}
}

Isi kecerunan bulat dari bawah ke atas.

repeating-radial-gradientUha, selepas melihat begitu banyak operasi yang hebat, adakah anda telah kehilangan kemahiran anda? radial-gradient

Alamat asal: https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA

(Belajar perkongsian video: bahagian hadapan web)

Atas ialah kandungan terperinci Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!