Rumah > Artikel > hujung hadapan web > Perbezaan antara peralihan dan transformasi dalam CSS
Perbezaan antara peralihan dan transformasi dalam CSS
- 王林asal
- 2024-02-18 19:46:191412semak imbas
Kedua-dua peralihan dan transformasi dalam CSS adalah sifat yang digunakan untuk mencapai kesan animasi, tetapi fungsi dan kaedah penggunaannya berbeza.
Atribut peralihan digunakan untuk menentukan kesan peralihan elemen semasa penukaran atribut CSS. Melalui atribut peralihan, kita boleh membuat atribut elemen berubah dengan lancar daripada keadaan awal kepada keadaan akhir dan bukannya berubah secara tiba-tiba. Sintaks peralihan adalah seperti berikut:
transition: property duration timing-function delay;
Antaranya, sifat mewakili sifat CSS yang akan dialihkan, yang boleh menjadi satu sifat atau berbilang sifat, dipisahkan dengan koma. tempoh mewakili tempoh peralihan, dalam saat atau milisaat. fungsi pemasaan mewakili fungsi pemasaan bagi kesan peralihan, yang digunakan untuk mengawal lengkung kelajuan peralihan. Lalai adalah mudah. kelewatan mewakili masa kelewatan sebelum peralihan bermula.
Berikut ialah contoh penggunaan peralihan:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Dalam contoh di atas, apabila tetikus melayang di atas elemen .box, lebar dengan lancar beralih daripada 100px kepada 200px.
Atribut transformasi digunakan untuk melakukan operasi ubah bentuk pada elemen, seperti putaran, penskalaan, terjemahan dan kecondongan, dsb. Dengan atribut transform, anda boleh menukar rupa elemen tanpa mengubah susun atur dokumen. Sintaks transformasi adalah seperti berikut:
transform: function(value);
Antaranya, fungsi mewakili fungsi ubah bentuk yang akan dilaksanakan, yang boleh menjadi putaran, penskalaan, terjemahan atau condong, dll.
Berikut ialah contoh penggunaan transform:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Dalam contoh di atas, elemen .box diputar 45 darjah.
Ringkasnya, atribut peralihan digunakan untuk mengawal kesan peralihan lancar bagi atribut CSS, manakala atribut transformasi digunakan untuk mengubah elemen. Dalam aplikasi praktikal, kedua-duanya sering digunakan bersama untuk mengawal kesan peralihan atribut transformasi melalui atribut peralihan, dengan itu mencapai kesan animasi yang lebih kompleks.
Atas ialah kandungan terperinci Perbezaan antara peralihan dan transformasi dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!