Sifat animasi CSS: transformasi dan peralihan-tutorial css-php.cn

Sifat animasi CSS: transformasi dan peralihan

PHPz

Lepaskan： 2023-10-27 16:06:26

asal

1046 orang telah melayarinya

CSS 动画属性：transform 和 transition

Ciri animasi CSS: transformasi dan peralihan

Dalam reka bentuk web moden, kesan animasi telah menjadi elemen yang sangat diperlukan yang boleh menambah daya hidup dan menarik pada halaman. CSS menyediakan beberapa sifat dan fungsi untuk mencapai pelbagai kesan animasi, dua sifat yang paling biasa digunakan ialah transformasi dan peralihan. Artikel ini akan memperkenalkan kedua-dua sifat ini secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakannya dengan lebih baik.

transform atribut

Atribut transformasi digunakan untuk mengubah atau memutar elemen. Melalui atribut transformasi, kesan seperti terjemahan, penskalaan, putaran dan kecondongan boleh dicapai. Ia mempunyai nilai yang biasa digunakan berikut:

Terjemahan: terjemah(x, y)
Kod sampel:

transform: translate(100px, 50px);

Salin selepas log masuk

Skala: skala(x, y)
Kod sampel:

transform: scale(1.5, 1.5);

Salin selepas log masuk

Putaran: putar(sudut)
Kod sampel :

transform: rotate(45deg);

Salin selepas log masuk

skew: skew(x-angle, y-angle)
Contoh kod:

transform: skew(10deg, 0);

Salin selepas log masuk

transition attribute

Atribut peralihan digunakan untuk menambah kesan peralihan pada elemen untuk menjadikannya peralihan dengan lancar apabila gaya berubah . Melalui atribut peralihan, anda boleh menetapkan masa peralihan, jenis peralihan, kelewatan peralihan, dsb. bagi elemen. Ia mempunyai nilai yang biasa digunakan berikut:

Masa peralihan: tempoh peralihan
Kod sampel:

transition-duration: 1s;

Salin selepas log masuk

Jenis peralihan: fungsi pemasaan peralihan
Kod sampel:

transition-timing-function: ease-in-out;

Salin selepas log masuk

Kod peralihan: penundaan peralihan 🜜 Contoh

Di atas ialah penggunaan asas atribut transformasi dan peralihan Ia boleh digunakan pada elemen secara individu atau digabungkan untuk mencipta kesan animasi yang lebih kompleks. Berikut ialah contoh kod lengkap yang menunjukkan cara menggunakan kedua-dua sifat ini untuk mencipta kesan animasi ringkas:

Kod HTML:

transition-delay: 0.5s;

Salin selepas log masuk

Dengan kod di atas, segi empat sama merah akan berputar mengikut arah jam apabila tetikus dilegar di atasnya 180 darjah, dan masa peralihan ialah 1 saat, dan kesan peralihan ialah mudah masuk (perlahan perlahan, kemudian cepat, kemudian perlahan).

Ringkasnya, sifat transformasi dan peralihan ialah alat penting untuk mencapai kesan animasi. Dengan menggunakan atribut ini secara fleksibel, kami boleh menambah kesan animasi yang jelas dan menarik pada halaman, dengan itu meningkatkan pengalaman pengguna dan kualiti halaman. Semoga contoh kod dan penjelasan yang disediakan dalam artikel ini akan membantu pembaca lebih memahami cara menggunakan kedua-dua sifat ini.

Atas ialah kandungan terperinci Sifat animasi CSS: transformasi dan peralihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!