Rumah > Artikel > hujung hadapan web > 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. Loading
Ya, 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%} }
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
0/0%
background-position: 0;/background-size: 0;
<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%} }
titik 2 steps(10)
pemprosesan step(10, end)
di atas ialah 100% {background-size:110%}
, jadi step
step
10
100% (1/10)*100% = 110%
<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-mask
5. Pemuatan baterirepeat
<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
.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; }
Nama ini agak tidak sesuai, tetapi ia tidak penting Pembaca dapat memahaminya secara semula jadi dengan melihat gambar.6 Pemuatan sebaris
<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%
. keyframes
inset
7. Pemuatan rantai manik0
<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-mask
radial-gradient
8. Pemuatan lintasan Zebraclosest-side
<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-gradient
var(--r1)
10 Pemuatan isyaratget
<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-gradient
Uha, 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!