Cara menggunakan peralihan dalam css

Harta peralihan dalam CSS membolehkan anda mengawal kesan visual unsur yang beralih dari satu keadaan ke keadaan yang lain. Penggunaan: Tentukan sifat untuk peralihan (seperti warna, saiz atau kedudukan) Tetapkan tempoh animasi peralihan (dalam saat atau milisaat) Pilih fungsi pelonggaran (mengawal kelajuan dan pecutan) Tetapkan kelewatan peralihan (berapa lama untuk menunggu sebelum memulakan animasi)

Menggunakan peralihan dalam CSS

Harta peralihan dalam CSS membolehkan anda mengawal kesan visual unsur yang beralih dari satu keadaan ke keadaan yang lain. Khususnya, peralihan menentukan berapa lama elemen dibelanjakan untuk menukar sifatnya, jenis animasi peralihan (iaitu, fungsi pelonggaran) dan kelewatan yang digunakan apabila peralihan selesai.

Penggunaan

Untuk menggunakan peralihan dalam CSS, gunakan sintaks berikut:

<code class="css">transition: property duration timing-function delay;</code>

Di mana:

• property: Sifat CSS yang mana kesan peralihan akan digunakan, seperti warna, saiz, atau kesan peralihan kedudukan.
• tempoh: Tempoh animasi peralihan, dalam saat atau milisaat.
• fungsi pemasaan: Menerangkan fungsi pelonggaran animasi peralihan, yang mengawal kelajuan dan pecutan animasi.
• delay: Kelewatan untuk digunakan sebelum animasi peralihan bermula, dalam saat atau milisaat.

Sebagai contoh, kod berikut akan mencipta butang yang beralih daripada biru ke merah dengan masa peralihan selama 1 saat dan menggunakan fungsi pelonggaran mudah-masuk-keluar:

<code class="css">button {
  background-color: blue;
  transition: background-color 1s ease-in-out;
}

button:hover {
  background-color: red;
}</code>

Fungsi pelonggaran

Fungsi pelonggaran yang ditentukan Peralihan kelajuan dan pecutan animasi. CSS menyediakan pelbagai fungsi pelonggaran yang dipratentukan, termasuk:

• linear: kelajuan seragam
• ease: bermula perlahan, kemudian dipercepatkan
• ease-in: bermula dengan perlahan
:-
• Slow end
• ease-in-out: Gabungkan kemudahan-in dan ease-out

Anda juga boleh menggunakan fungsi pelonggaran tersuai untuk mencipta kesan peringkat lebih tinggi.

Delay

Atribut kelewatan mengawal berapa lama elemen menunggu sebelum menukar sifatnya. Ini boleh digunakan untuk mencipta kesan ketinggalan atau menyegerakkan peralihan kepada berbilang elemen.

Nota

Secara lalai, peralihan hanya digunakan pada sifat unsur yang diisytiharkan.
• Peralihan boleh digunakan pada semua sifat yang diisytiharkan bagi sesuatu elemen menggunakan kata kunci
• . all
Penyemak imbas menyokong versi yang berbeza bagi atribut peralihan, jadi adalah penting untuk menguji kod anda untuk memastikan keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Cara menggunakan peralihan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!