Gunakan CSS tulen untuk mencapai kesan animasi ikon React berputar

Artikel ini akan membawa anda langkah demi langkah untuk menggunakan CSS tulen untuk mencapai kesan animasi ikon React berputar, saya harap ia akan membantu anda!

Beberapa hari yang lalu, Xiaobao melihat kesan pemuatan codepenSword Qi dalam Dia sangat terkejut dan kagum dengan CSS sekali lagi . Saya pada asalnya ingin bekerjasama dengan semua orang untuk merealisasikan Sword Qi dimuatkan Selepas mencari, Xiaobao mendapati bahawa Encik Xiao Lu telah menyedarinya, jadi dia berhenti cuba melakukan perkara yang sama.

Adakah Xiao Bao seorang yang boleh diyakinkan? sudah tentu!

Xiao Bao memerah otaknya dan menghasilkan corak yang sangat menarik, iaitu versi Jianqi plus.

react Ikon , sungguh menakjubkan, bukankah ini roh pedang plus? react Aktifkan Xiaobao*!

Alamat projek: react Aktifkan

https://zcxiaobao.github.io/zc -demos/ display/reactMoveLoading/index.html

lukisan ikon bertindak balas

react Semua orang harus biasa dengan ikon, yang terdiri daripada tiga bujur dengan saiz yang sama dan bulatan tengah . Elips dan bulatan dilaksanakan menggunakan border-radius.

• Pertama sediakan html struktur tiga elips dan bulatan tengah

<div class="react">
    <div class="electron"></div>
    <div class="electron-alpha"></div>
    <div class="electron-omega"></div>
</div>

• Tiga elips adalah sama, tulis gaya elips biasa , tiga elips bertindih diperolehi.

.react > [class^="electron"] {
    border: #5ed3f3 solid 2px;
    border-radius: 100%;
    width: 100%;
    /* CSS变量 --electron-orbit-size值为72px */
    height: var(--electron-orbit-size); 
}

• Tetapkan sudut kecondongan elips kedua dan ketiga kepada 60deg dan -60deg

.electron-alpha {
    transform: rotate(60deg);
}
.electron-omega {
    transform: rotate(-60deg);
}

• Gunakan react: before elemen pseudo untuk melukis bulatan tengah dan gunakan kedudukan mutlak untuk meletakkan bulatan tengah ke tengah. react Lukisan ikon selesai.

.react:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--nucleus-size);
    height: var(--nucleus-size);
    margin-top: calc(var(--nucleus-size) / -2);
    margin-left: calc(var(--nucleus-size) / -2);
    background: var(--electron-color-hex);
}
.react > [class^="electron"] {
    position: absolute;
    top: 50%;
    margin-top: calc(var(--electron-orbit-size) / -2);
}

reka bentuk animasi ikon reaksi

Lima puluh hari, Daoyan empat puluh sembilan, masih ada secercah harapan, hilang Ia adalah mungkin untuk membangunkan kecantikan istimewa.

Jadi mari cuba alih keluar sebahagian daripada elips untuk melihat sama ada ia akan mencipta animasi yang menarik?

Andaikan bahawa keadaan permulaan ialah border-left tiada, dan kemudian hilang dalam susunan kiri, bawah, kanan dan Mari kita lihat kesan animasi .

• Tetapkan animasielectron-orbit Tukar tepi yang hilang mengikut urutan

@keyframes electron-orbit {
  0% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 0) solid 2px;
  }
  25% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 0) solid 2px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  50% {
    border-top: rgba(94, 211, 243, 1) solid 1px;
    border-right: rgba(94, 211, 243, 0) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 4px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  75% {
    border-top: rgba(94, 211, 243, 0) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  100% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 0) solid 2px;
  }
}

Kesan keseluruhan animasi tidak mengapa, tetapi disebabkan Bahagian yang hilang adalah daripada 0 -> 1, dan ketelusan berubah terlalu banyak, menyebabkan animasi keseluruhan menjadi tidak koheren.

• Kurangkan ketelusan bahagian paparan, masing-masing0.5 0.35 0.2 0

Selepas mengurangkan ketelusan, kesinambungan animasi dipertingkatkan banyak, tetapi Perasaan garisan adalah sangat teruk. Seterusnya, teruskan mengubah suai ketebalan garisan.

• Ubah suai ketebalan garisan Kecerunan ketebalan ialah 4px 2px 1px 0px

Tiga elips menggunakan animasi yang sama dan mempunyai masa permulaan yang sama , jadi irama animasi kekal konsisten dan kelihatan agak kaku. Kami menetapkan irama animasi yang unik untuk setiap elips.

• Tetapkan masa tunda animasi yang berbeza untuk setiap elips, masing-masing 1.2s 1s 0.8s

Tambah animasi bola kecil

Hanya animasi garisan yang masih agak membosankan Teruskan mengoptimumkan dan menambah bola kecil pada bahagian yang hilang Bola kecil akan bergerak dengan bahagian yang hilang, dan bola kecil juga akan mempunyai kesan zum masuk.

@keyframes electron {
  0% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
  12.5% {
    top: 100%;
    transform: scale(1.5);
  }
  25% {
    left: 100%;
    transform: scale(1);
  }
  37.5% {
    top: 0%;
    transform: scale(0.25);
  }
  50% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
  62.5% {
    top: 100%;
    transform: scale(1.5);
  }
  75% {
    left: 100%;
    transform: scale(1);
  }
  87.5% {
    top: 0%;
    transform: scale(0.25);
  }
  100% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
}

Bagaimana pula, adakah ia kelihatan seperti sesuatu telah dilakukan Jangan risau, ada satu langkah terakhir, mari kita gerakkan ikon itu.

Ikon bergerak

Tambahkan animasi putaran, pengecutan dan zum pada keseluruhan ikon untuk melengkapkan kesan react loading akhir

@keyframes react {
  0% {
    transform: rotate(0deg) scale(1);
  }
  12.5% {
    transform: rotate(-45deg) scale(0.9);
  }
  25% {
    transform: rotate(-90deg) scale(1);
  }
  37.5% {
    transform: rotate(-135deg) scale(0.9);
  }
  50% {
    transform: rotate(-180deg) scale(1);
  }
  62.5% {
    transform: rotate(-225deg) scale(0.9);
  }
  75% {
    transform: rotate(-270deg) scale(1);
  }
  87.5% {
    transform: rotate(-315deg) scale(0.9);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

Gudang kod sumber

Alamat kod sumber: gerak balas

https://github.com/zcxiaobao/zc-demos/blob/main/display/reactMoveLoading/index. html

Alamat projek: bertindak balas

https://zcxiaobao.github.io/zc-demos/display/reactMoveLoading/index.html

Jangan lupa tempah beg kecil jika anda rasa ia membantu.

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Gunakan CSS tulen untuk mencapai kesan animasi ikon React berputar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!