Harta harta peralihan peralihan CSS3

Sintaks:

transition-property：all | none | <property>[ ,<property> ]*

Analisis parameter:
1.all: Tetapkan semua atribut yang boleh dialihkan.
2.tiada: Jangan nyatakan atribut yang boleh dialihkan.
3.<harta>: Tentukan sifat yang boleh dialihkan.
Arahan khas:
1 Jika menetapkan berbilang atribut, pisahkan nama atribut dengan koma.
2. Sifat skrip yang sepadan ialah transitionProperty.

sifat peralihan digunakan untuk menyatakan bahawa kesan peralihan akan dilaksanakan apabila salah satu atribut elemen berubah terutamanya: tiada (tiada atribut berubah semua). perubahan atribut). Ini juga berlaku nilai lalainya (nama atribut elemen). Apabila nilainya tiada, peralihan akan berhenti melaksanakan serta-merta Apabila ia dinyatakan sebagai semua, kesan peralihan akan dilaksanakan apabila sebarang nilai atribut bagi pengenalpastian elemen boleh menentukan nilai atribut tertentu. Jenis yang sepadan adalah seperti berikut:

1 Warna: Diubah melalui komponen merah, hijau, biru dan ketelusan (setiap nilai berangka diproses) seperti: warna latar, warna sempadan, warna, warna garis besar. dan atribut css lain ;

2. Panjang: nombor nyata seperti: jarak perkataan, lebar, penjajaran menegak, atas, kanan, bawah, kiri, pelapik, lebar garis, jidar, lebar min, ketinggian min, atribut seperti lebar maks, ketinggian maks, ketinggian garis, ketinggian, lebar sempadan, jarak sempadan, kedudukan latar belakang

3 Peratusan: nombor nyata seperti: perkataan-; jarak, lebar, menegak -jajar, atas, kanan, bawah, kiri, lebar-min, tinggi-min, lebar-maks, tinggi-maks, tinggi-garis, tinggi, kedudukan latar belakang dan atribut lain

4, langkah diskret integer (Nombor keseluruhan), berlaku dalam ruang nombor nyata dan apabila menggunakan floor() untuk menukar kepada integer, seperti: outline-offset, z-index dan atribut lain; >5. Nilai sebenar (titik terapung) nombor , seperti: zum, kelegapan, berat fon dan atribut lain

6. Untuk butiran, sila rujuk: "CSS3 Transform"

7. segi empat tepat: melalui x, y, lebar dan tinggi (ditukar kepada nilai berangka), seperti: pangkas

8: langkah diskret, dalam julat berangka 0 hingga 1, 0 bermaksud "tersembunyi", 1 bermaksud "dipaparkan" sepenuhnya, seperti: keterlihatan

9 Bayang: Bertindak pada atribut warna, x, y dan kabur (kabur), seperti: teks-bayang

10 Kecerunan: berubah melalui kedudukan dan warna setiap hentian. Mereka mesti mempunyai jenis yang sama (jejarian atau linear) dan nilai hentian yang sama untuk melaksanakan animasi, seperti: imej latar belakang

11 pelayan cat (SVG): hanya menyokong situasi berikut: dari kecerunan kepada kecerunan dan warna kepada warna, dan kemudian kerja adalah serupa dengan di atas

12. senarai dipisahkan ruang di atas: Jika senarai mempunyai nilai item yang sama, maka setiap item dalam senarai akan berubah mengikut peraturan di atas, jika tidak, tiada perubahan

13 sifat singkatan: Jika semua bahagian singkatan boleh dianimasikan, ia akan berubah seperti semua perubahan sifat tunggal

Apakah atribut CSS khusus yang boleh mencapai kesan peralihan Semua nilai atribut CSS dan jenis nilai yang boleh mencapai kesan peralihan disenaraikan di tapak web rasmi W3C Anda boleh klik di sini untuk mengetahui lebih lanjut. Apa yang perlu diingatkan di sini ialah tidak semua perubahan atribut mencetuskan kesan tindakan peralihan, seperti lebar penyesuaian halaman Apabila penyemak imbas menukar lebar, kesan peralihan tidak akan dicetuskan. Walau bagaimanapun, perubahan dalam jenis atribut yang ditunjukkan dalam jadual di atas akan mencetuskan kesan tindakan peralihan.

Contoh kod:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php中文网.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition-property:width;
  -moz-transition-property:width;
  -webkit-transition-property:width;
  -o-transition-property:width;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Atribut peralihan yang ditetapkan oleh kod di atas ialah lebar.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Kod di atas boleh menetapkan kesan peralihan dua atribut, dipisahkan dengan koma.

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s; -moz-transition-duration:2s; -webkit-transition-duration:2s; -o-transition-duration:2s; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik