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中文网(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 | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
Instance
Gunakan semua atribut peralihan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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中文网(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
