Artikel ini akan berkongsi dengan anda 8 petua CSS untuk melaksanakan kesan pemuatan pemuatan saya harap ia akan membantu anda!

Mengapa anda menulis artikel seperti ini? Semasa pembangunan biasa, 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. Lama kelamaan, saya menjadi jurutera CV. Artikel ini menerangkan idea untuk kaedah pemuatan yang berbeza Saya harap semua orang bukan sahaja boleh menggunakannya, tetapi juga menulisnya. Amalan membawa ilmu yang benar. (Belajar perkongsian video: tutorial video css, bahagian hadapan web)

Artikel ini hanya memperkenalkan pemuatan bulatan. Lain-lain akan diperkenalkan dalam artikel lain.

pemuat-1

Ini sepatutnya menjadi pemuatan CSS yang paling mudah. Terdapat lengkok merah pada bulatan. Jika anda melihat dengan teliti, anda akan mendapati bahawa lengkok ini betul-betul 1/4.

Logik pelaksanaan:

Bekas dengan lebar dan tinggi yang sama, tetapkan jidar kepada putih. Kemudian tetapkan warna merah ke bahagian bawah,

Apabila jejari sempadan ditetapkan kepada 50%, maka ia boleh menjadi bulatan.

Tambahkan animasi putaran pada kalangan ini. Animasi sudut putaran dalam CSS adalah rotate(). (Animasi ini akan digunakan berkali-kali di bawah, jadi saya tidak akan pergi ke butiran di bawah)

 @-webkit-keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

Kod penuh

.loader-1 {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

loader-2

Pemerhatian: Terdapat bulatan di bahagian luar, dan di sana ialah unsur merah berputar di dalam.

Laksanakan logik

Bekas dengan lebar dan tinggi yang sama, ditambah sisi putih dan 50% bucu bulat. Ini adalah bulatan luar.

Bagaimana untuk mencapai bahagian dalam merah? Terdapat dua idea di sini. 1; Tambah div kecil baharu, letakkan di dalam, dan tetapkan sempadan bawah merah seperti loader-1. 2: Gunakan ::selepas, idea adalah sama dengan kaedah 1.

Tambahkan animasi berputar.

Kod penuh

.loader-2 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.loader-2:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #FF3D00;
}

loader-3

Pemerhatian: Bahagian dalam adalah bulatan dan bahagian luar adalah lengkok merah.

Logik pelaksanaan

Kesan loading ini sama dengan loader-2, bezanya arka merah di dalam dan di luar.

Kod penuh

.loader-3 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.loader-3:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #FF3D00;
}

loader-4

Pemerhatian: Terdapat bulatan di bahagian luar dan dua bulatan di bahagian dalam kedua-dua bulatan ini betul-betul simetri.

Laksanakan logik

Bekas dengan lebar dan tinggi yang sama, ditambah sisi putih dan 50% bucu bulat. Ini adalah bulatan luar.

Bagaimana untuk mencapai bahagian dalam merah? Terdapat dua idea di sini. 1; Tambah dua div kecil, tetapkan warna latar belakang kepada merah, dan kemudian tetapkan sudut kepada 50%, supaya ia kelihatan seperti dua titik kecil. 2: Gunakan ::selepas dan ::sebelum, idea adalah sama dengan kaedah 1.

Tambahkan animasi berputar.

Kod penuh

.loader-4 {
    width: 48px;
    height: 48px;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.loader-4:before {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    background: #FF3D00;
    width: 6px;
    height: 6px;
    transform: translate(-150%, -150%);
    border-radius: 50%;
}

.loader-4:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #FF3D00;
    width: 6px;
    height: 6px;
    transform: translate(150%, 150%);
    border-radius: 50%;
}

loader-5

Pemerhatian: Terdapat tiga lapisan kesemuanya, bulatan putih paling luar, bulatan merah tengah dan bulatan putih dalam. Setiap bulatan mempunyai jurang separuh lengkok, dan bulatan luar dan bulatan paling dalam berputar ke arah yang sama.

Melaksanakan logik

一個寬高相等的容器，加上白色的邊，50%的圓角。這樣就是外圍的圈。

這里的問題是，圈的缺口如何實現(xiàn)，其實很簡單，在css中有一個屬性值：transparent，利用這個值給邊框設置透明，即可實現(xiàn)缺口。

對于內部的紅色和白色圓弧，繼續(xù)使用::after和::before即可。

加上動畫，這里有一個反方向旋轉的動畫(rotationBack)。 這里設置旋轉是往負角度，旋轉即可反方向旋轉。

  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }

完整代碼

.loader-5 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #FFF #FFF transparent transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.loader-5:before {
    width: 32px;
    height: 32px;
    border-color: #FFF #FFF transparent transparent;
    -webkit-animation: rotation 1.5s linear infinite;
    animation: rotation 1.5s linear infinite;
}

.loader-5:after, .loader-5:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #FF3D00 #FF3D00;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-animation: rotationBack 0.5s linear infinite;
    animation: rotationBack 0.5s linear infinite; 
    transform-origin: center center; *
}

loader-6

觀察：看上去像是一個時鐘，一個圓里面有一根指針。

實現(xiàn)邏輯

一個寬高相等的容器，加上白色的邊，50%的圓角。這樣就是外圍的圈。

指針是如何實現(xiàn)的：從這里開始不再討論新增div的情況。 其實紅色的指針就是一個單純的寬高不一致的容器。

完整代碼

.loader-6 {
    width: 48px;
    height: 48px;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.loader-6:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    background: #FF3D00;
    width: 3px;
    height: 24px;
    transform: translateX(-50%);
}

loader-7

觀察：首先確定幾個圈，一共兩個。當第一個圈還沒消失，第二個圈已經出現(xiàn)。最后出現(xiàn)了類似水波的效果。同時要注意的是，這兩個兩個圈是一樣大的，這是因為他們最終消失的地方是一致的。

實現(xiàn)邏輯

首先確定，這兩個圈是否在容器上。上面一直時在容器上添加邊框，當然這個例子也可以，但是為了實現(xiàn)的簡單，我們把這兩個圈放在::after和::before中。

加上動畫，這里的圈是逐漸放大的，在CSS中scale用來放大縮小元素。同時為了實現(xiàn)波紋逐漸清晰的效果，我們加上透明度。

  @keyframes animloader7 {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }

完整代碼

這里因為兩個圈是先后出現(xiàn)的，所以需要一個圈加上delay

.loader-7 {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}

.loader-7::after, .loader--7::before {
    content: "";
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: animloader7 2s linear infinite;
    animation: animloader7 2s linear infinite;
}

.loader-7::after {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.loader-7::after, .loader-7::before {
    content: "";
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: animloader7 2s linear infinite;
    animation: animloader7 2s linear infinite;
}

loader-8

觀察：一段圓弧加上一個三角形。

實現(xiàn)邏輯

一個寬高相等的容器，加上白色的邊，50%的圓角。這樣就是外圍的圈。

transparent，利用這個值給邊框設置透明，即可實現(xiàn)缺口。

在:after上創(chuàng)建箭頭。CSS中我們有多種方法實現(xiàn)三角形，其中最簡單是使用border，不需要給元素設置寬高，只需要設置border的大小，并且只有一邊設置顏色。

border: 10px solid transparent;
border-right-color: #FFF

加上旋轉動畫。

完整代碼

.loader-8 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.loader-8:after {
    content: "";
    position: absolute;
    left: 20px;
    top: 31px;
    border: 10px solid transparent;
    border-right-color: #FFF;
    transform: rotate(-40deg);
}

本文轉載自：https://juejin.cn/post/7018466377551839269

作者：前端picker

更多編程相關知識，請訪問：編程入門??！

Atas ialah kandungan terperinci 8 petua CSS untuk melaksanakan kesan pemuatan pemuatan (kongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!