Ciri peralihan CSS3
Piawaian W3C menerangkan peralihan CSS3 seperti berikut: "Peralihan CSS membenarkan nilai atribut CSS ????untuk beralih dengan lancar dalam selang masa tertentu. Kesan ini boleh dicapai apabila tetikus mengklik, mendapat fokus, Ia adalah dicetuskan oleh klik atau sebarang perubahan pada elemen, dan menukar nilai atribut CSS dengan kesan animasi dengan lancar "
peralihan css3 (Peralihan CSS) Jadikan animasi lebih jelas dan realistik, mari belajar bersama. Peralihan CSS.
Bagaimana ia berfungsi?
Kesan peralihan CSS3 membenarkan elemen beralih daripada satu kesan ke kesan yang lain Untuk melakukan ini, anda mesti menentukan dua perkara dan menentukan tempoh kesan.
Contohnya:
.className{
peralihan: lebar 2s;
-moz-transition: lebar 2s; /* Firefox 4 */
-webkit-transition: 2s lebar; /* Safari dan Chrome */
-o-peralihan: lebar 2s; /* Opera */
}
Nota: Jika tidak Menentukan masa tunda animasi, peralihan tidak akan mempunyai kesan kerana nilai lalai ialah 0.
Apabila tetikus diletakkan padanya, transformasi bermula:
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微軟雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html> Perubahan gaya
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>Atribut peralihan
Jadual berikut menyenaraikan semua atribut peralihan:
Atribut?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????> Atribut trengkas peralihan, digunakan untuk menetapkan empat atribut peralihan dalam satu atribut. 3 ? transition-property Menentukan nama sifat CSS yang menggunakan peralihan. 3 ? tempoh peralihan Tentukan masa yang dibelanjakan untuk kesan peralihan. Lalai ialah 0. 3 ? fungsi pemasaan peralihan menentukan lengkung masa kesan peralihan. Lalai ialah "kemudahan". 3 ? tunda-peralihan Menentukan apabila kesan peralihan bermula. Lalai ialah 0. 3?<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:yellow;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>需要鼠標在圖片上面懸停2秒才顯示效果</p>
</body>
</html>
