Rumah  >  Artikel  >  hujung hadapan web  >  Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

青灯夜游
青灯夜游ke hadapan
2022-03-31 11:01:484649semak imbas

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!

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

<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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

<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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

<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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

<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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

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.

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

<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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

<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

Kongsi 10 Kesan pemuatan dilaksanakan dalam CSS tulen

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!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam