Peralihan CSS3
Peralihan CSS3
Dalam CSS3, kami boleh menambah kesan tertentu dengan beralih daripada satu gaya ke gaya lain tanpa menggunakan animasi Flash atau JavaScript .
Bagaimana ia berfungsi?
Peralihan CSS3 ialah kesan elemen yang berubah secara beransur-ansur dari satu gaya ke gaya yang lain.
Untuk mencapai ini, dua perkara mesti ditentukan:
Nyatakan sifat CSS untuk menambah kesan
Nyatakan tempoh kesan.
Kesan peralihan digunakan pada atribut lebar, dengan tempoh 2 saat:
div
{
peralihan: lebar 2s;
-webkit-transition: width 2s; /* Safari */
}
Nota: Jika tempoh tidak dinyatakan, peralihan tidak akan memberi kesan kerana nilai lalai ialah 0.
Kesan akan berubah apabila nilai sifat CSS yang ditentukan berubah. Sifat CSS biasa berubah apabila pengguna mengarahkan tetikus pada elemen:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background: #d7ffb5;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>鼠標移動到 div 元素上，查看過渡效果。</p>
</body>
</html>Jalankan atur cara untuk mencubanya
Berbilang perubahan
Untuk menambah berbilang gaya kesan transformasi, tambah atribut yang dipisahkan dengan koma:
rreeeJalankan Cuba program
Atribut peralihan
Jadual berikut menyenaraikan semua atribut peralihan:
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規(guī)定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規(guī)定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規(guī)定過渡效果何時開始。默認是 0。 | 3 |
Instance
Gunakan semua atribut peralihan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div {
width: 100px;
height: 100px;
background: #92ffc7;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>鼠標移動到 div 元素上，查看過渡效果。</div>
</body>
</html>Jalankan program untuk cubalah
Kesan peralihan yang sama seperti contoh di atas, tetapi menggunakan atribut peralihan yang disingkat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background: #ffedd7;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<div>過渡</div>
<p>鼠標移動到 div 元素上，查看過渡效果。</p>
<p><b>注意：</b> 過渡效果需要等待兩秒后才開始。</p>
</body>
</html>Jalankan program untuk mencubanya
