masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Peralihan peralihan CSS3

Penjelasan terperinci tentang atribut peralihan SS3:
Bab ini memperkenalkan penggunaan atribut peralihan, yang juga merupakan atribut yang berkaitan dengan animasi.
1 Pengetahuan asas:
peralihan diterjemahkan ke dalam bahasa Cina bermaksud "peralihan", yang bermaksud bahawa nilai atribut css sesuatu elemen boleh diubah dalam tempoh tertentu. masa Buat peralihan yang lancar.
Atribut ini ialah atribut komposit seperti sempadan, latar belakang dan atribut lain.
Struktur sintaks:

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

Penjelasan parameter:
1.transition-property: Tetapkan atau dapatkan semula sifat yang mengambil bahagian dalam peralihan.
2.tempoh peralihan: Dapatkan semula atau tetapkan tempoh peralihan objek.
3.transition-timing-function: Dapatkan semula atau tetapkan jenis animasi peralihan dalam objek.
4.transition-delay: Dapatkan semula atau tetapkan masa peralihan kelewatan objek.
Contoh kod adalah seperti berikut:

<!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:width 2s;
  -moz-transition:width 2s;
  -webkit-transition:width 2s;
  -o-transition:width 2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Kod di atas menunjukkan cara menganimasikan lebar div daripada 100px kepada 500px dalam masa dua saat.
Memandangkan ia adalah atribut komposit, adalah wajar untuk menetapkan atribut secara berasingan


Meneruskan pembelajaran
||
<!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:width 2s; -moz-transition:width 2s; -webkit-transition:width 2s; -o-transition:width 2s; } #thediv:hover{ width:500px; } </style> </head> <body> <div id="thediv"></div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492896 permainan