masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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中文网(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中文网(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中文网(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>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> .box{width:100px;height:100px;background:red; transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);} .box:hover{width:500px;} </style> </head> <body> <div class="box"></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)  492830 permainan