cari
Rumahhujung hadapan webtutorial cssKongsi 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!

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:掘金社区. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Kemas kini 'CSS4'Kemas kini 'CSS4'Apr 11, 2025 pm 12:05 PM

Sejak saya mula -mula berbunyi pada perkara CSS4¹, ada lebih banyak perbincangan di atasnya. Saya akan mengulangi pemikiran kegemaran saya dari orang lain di sini. Ada

Tiga jenis kodTiga jenis kodApr 11, 2025 pm 12:02 PM

Setiap kali saya memulakan projek baru, saya menyusun kod yang saya cari dalam tiga jenis, atau kategori jika anda suka. Dan saya fikir jenis ini boleh digunakan

HTTPS mudah!HTTPS mudah!Apr 11, 2025 am 11:51 AM

Saya ' telah bersalah secara terbuka merungut kerumitan HTTPS. Pada masa lalu, saya membeli sijil SSL dari vendor pihak ketiga dan menghadapi masalah

Panduan Atribut Data HTMLPanduan Atribut Data HTMLApr 11, 2025 am 11:50 AM

Semua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.

Memahami kebolehubahan dalam JavaScriptMemahami kebolehubahan dalam JavaScriptApr 11, 2025 am 11:47 AM

Sekiranya anda tidak bekerja dengan kebolehubahan dalam JavaScript sebelum ini, anda mungkin mudah mengelirukan dengan memberikan pembolehubah kepada nilai baru, atau penugasan semula.

Input bentuk gaya tersuai dengan ciri CSS modenInput bentuk gaya tersuai dengan ciri CSS modenApr 11, 2025 am 11:45 AM

Ia mungkin sepenuhnya untuk membina kotak semak tersuai, butang radio, dan suis bertukar hari ini, sambil tetap semantik dan boleh diakses. Kami tidak memerlukan

Watak nota kakiWatak nota kakiApr 11, 2025 am 11:34 AM

Terdapat watak nombor superset khas yang kadang -kadang sesuai untuk nota kaki. Di sini mereka:

Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScriptCara membuat pemasa undur animasi dengan HTML, CSS dan JavaScriptApr 11, 2025 am 11:29 AM

Pernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa