Perbezaan antara peralihan dan transformasi dalam CSS-tutorial css-php.cn

Perbezaan antara peralihan dan transformasi dalam CSS

王林

Lepaskan： 2024-02-18 19:46:19

asal

1421 orang telah melayarinya

Perbezaan antara peralihan dan transformasi dalam CSS

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;

Salin selepas log masuk

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>

Salin selepas log masuk

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);

Salin selepas log masuk

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>

Salin selepas log masuk

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!