Animasi CSS: Bagaimana untuk mencapai kesan kilat elemen, contoh kod khusus diperlukan

Dalam reka bentuk web, kesan animasi kadangkala boleh membawa pengalaman pengguna yang baik ke halaman. Kesan glitter ialah kesan animasi biasa yang boleh menjadikan elemen lebih menarik perhatian. Berikut akan memperkenalkan cara menggunakan CSS untuk mencapai kesan kilat elemen.

1. Pelaksanaan asas flash

Pertama, kita perlu menggunakan sifat animasi CSS untuk mencapai kesan kilat. Nilai sifat animasi perlu menentukan nama animasi, masa pelaksanaan animasi, masa tunda animasi, kaedah pelaksanaan animasi dan masa pelaksanaan animasi. Untuk kesan kilat, kita boleh menentukannya sebagai animasi gelung tak terhingga.

Seterusnya, kita perlu menetapkan gaya kepada elemen. Memandangkan kesan glitter memerlukan menukar warna elemen itu sendiri, kita boleh menggunakan sifat CurrentColor CSS untuk mendapatkan warna teks semasa elemen sebagai warna glitter. Kita juga boleh memisahkan gaya elemen daripada kesan kilat melalui pemilih, supaya gaya kawalan dan animasi boleh dipisahkan.

Berikut ialah contoh kod ringkas:

/* 為需要實現(xiàn)閃光效果的元素添加樣式 */
.shine {
  color: black;
}

/* 定義閃光動畫 */
@keyframes shining {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 1rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 currentColor;
  }
}

/* 應用閃光動畫 */
.shine::before {
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
  opacity: 0;
}

Dalam kod gaya di atas, kami menentukan kelas bernama .shine untuk menggayakan elemen. Apabila mentakrifkan animasi, kami menggunakan peraturan @keyframes untuk mentakrifkan animasi bernama bersinar dan menetapkan 3 bingkai utama untuk mencapai kesan berkelip.

Seterusnya, kami menambah lapisan lutsinar yang diposisikan secara mutlak pada elemen menggunakan kelas pseudo ::before dan menggunakan animasi kesan bergemerlapan pada lapisan itu.

2. Pertimbangan keserasian

Walaupun kod di atas boleh mencapai kesan kilat, ia tidak serasi dengan semua pelayar. Menurut caniuse.com, kedua-dua sifat kotak-bayang dan harta semasaColor mempunyai masalah keserasian.

Untuk menyelesaikan masalah ini, kami boleh membuat beberapa pengubahsuaian pada kod di atas. Pertama, kita boleh menggantikan harta kotak-bayang dengan imej latar belakang yang telus. Kedua, kita boleh menggunakan fungsi rgba() CSS untuk mengawal warna denyar dan ketelusan.

Berikut ialah kod sampel yang diubah suai:

/* 為需要實現(xiàn)閃光效果的元素添加樣式 */
.shine {
  color: black;
}

/* 定義閃光動畫 */
@keyframes shining {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 應用閃光動畫 */
.shine::before {
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

Dalam kod yang diubah suai di atas, kami telah menggunakan atribut warna latar belakang dan atribut kelegapan dan bukannya atribut bayang kotak. Apabila mentakrifkan animasi kilat, kami menggunakan fungsi rgba() untuk menetapkan warna dan ketelusan. Dengan cara ini, kita boleh melaksanakan kesan glitter dalam semua penyemak imbas moden.

3. Pengoptimuman lain

Seterusnya, kita boleh membuat beberapa pengoptimuman pada kod. Sebagai contoh, kita boleh melumpuhkan pelaksanaan kesan animasi apabila halaman pertama kali dimuatkan untuk meningkatkan prestasi halaman web. Kami juga boleh menggunakan sifat perubahan kehendak CSS untuk mempercepatkan prestasi pemaparan semasa main balik animasi.

Berikut ialah contoh kod yang dioptimumkan:

/* 為需要實現(xiàn)閃光效果的元素添加樣式 */
.shine {
  color: black;
}

/* 定義閃光動畫 */
@keyframes shining {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 優(yōu)化樣式 */
.shine::before {
  will-change: opacity, background-color;
}

/* 禁用閃光動畫在載入時立即執(zhí)行 */
.shine:not(:hover)::before {
  animation-play-state: paused;
}

/* 開啟閃光動畫 */
.shine:hover::before {
  animation-play-state: running;
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

Dalam kod yang diubah suai di atas, kami menggunakan sifat perubahan kehendak CSS untuk mengarahkan penyemak imbas mengoptimumkan pemaparan elemen. Untuk mengelakkan kesan animasi daripada dilaksanakan serta-merta apabila halaman dimuatkan, kami menggunakan atribut animation-play-state untuk menetapkan keadaan awal yang dijeda. Akhir sekali, apabila tetikus melayang di atas elemen, kami menggunakan :hover pseudo-class untuk menghidupkan animasi kilat dan menetapkan nilai atribut animasi kepada bersinar.

Ringkasan

Melalui contoh kod di atas, kita boleh melihat cara menggunakan CSS untuk mencapai kesan kilat elemen. Kesan ini boleh membawa pengalaman pengguna yang baik kepada reka bentuk web. Apabila mencapai kesan ini, kita perlu memberi perhatian kepada keserasian dan prestasi kod. Jika anda menghadapi masalah semasa latihan, anda boleh cuba mengoptimumkan kod dan mencuba penyelesaian lain.

Atas ialah kandungan terperinci Animasi CSS: Cara Mencapai Kesan Kilat Elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!