masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Ciri peralihan-penangguhan peralihan CSS3

Sintaks: 

 transition-delay ： <time> [, <time>]*

penangguhan peralihan digunakan untuk menentukan masa apabila animasi mula dilaksanakan, iaitu, berapa lama masa yang diambil selepas elemen nilai atribut ditukar Mula melaksanakan kesan peralihan, nilainya: <masa> ialah nilai berangka, unit ialah s (saat) atau ms (milisaat), penggunaannya hampir sama dengan tempoh peralihan, dan juga boleh digunakan pada semua elemen, termasuk: sebelum dan: selepas unsur Pseudo. Saiz lalai ialah "0", yang bermaksud transformasi dilakukan serta-merta tanpa berlengah-lengah.

Kadang-kadang kita bukan sahaja menukar atribut satu kesan css, tetapi mahu menukar kesan peralihan dua atau lebih atribut css, maka kita hanya perlu rentetan beberapa pernyataan peralihan bersama-sama dengan koma ("," ) dipisahkan , dan kemudian setiap satu boleh mempunyai kaedah transformasi tempoh dan kadar masa yang berbeza. Tetapi sesuatu yang perlu diberi perhatian: Nilai-nilai peralihan-penangguhan dan peralihan-tempoh adalah kedua-dua masa, jadi untuk membezakan kedudukan mereka dalam urutan, penyemak imbas biasanya membuat keputusan berdasarkan susunan Nilai pertama yang boleh dihuraikan sebagai masa ialah Yang kedua tempoh peralihan ialah penundaan peralihan. Contohnya: 

 a {    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
    -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
    -o-transition: background 0.5s ease-in,color 0.3s ease-out;
    transition: background 0.5s ease-in,color 0.3s ease-out;
  }

Jika anda ingin melaksanakan semua atribut kesan peralihan pada elemen, maka kami juga boleh menggunakan nilai semua atribut untuk beroperasi Pada masa ini, ia berkongsi tempoh yang sama dan kaedah transformasi kadar , seperti: 

 a {    -moz-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   transition: all 0.5s ease-in;
 }

Berdasarkan perkara di atas, kami boleh memberikan peralihan: <property> ;tunda> seperti yang ditunjukkan di bawah:


Kod contoh sepadan:

p {  -webkit-transition: all .5s ease-in-out 1s;
 -o-transition: all .5s ease-in-out 1s;
 -moz-transition: all .5s ease-in-out 1s;
 transition: all .5s ease-in-out 1s;}

Contoh kod:
Contoh 1: 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="//m.sbmmt.com/" /> 
<title>php中文网</title> 
<style type="text/css"> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
     
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
     
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
   
  transition-delay:2s;
  -moz-transition-delay:2s;
  -webkit-transition-delay:2s;
  -o-transition-delay:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Dalam kod di atas, menuding tetikus di atas div memerlukan kelewatan selama dua saat sebelum melaksanakan kesan animasi.
Contoh 2:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="//m.sbmmt.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
     
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
     
  transition-duration:2s,6s;
  -moz-transition-duration:2s,6s;
  -webkit-transition-duration:2s,6s;
  -o-transition-duration:2s,6s;
   
  transition-delay:2s,6s;
  -moz-transition-delay:2s,6s;
  -webkit-transition-delay:2s,6s;
  -o-transition-delay:2s,6s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Dalam kod di atas, apabila tetikus melayang di atas div, ia akan melambatkan masing-masing 2 saat dan 6 saat sebelum memulakan untuk menunjuk kepada lebar dan ketinggian kesan peralihan animasi.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s,6s; -moz-transition-duration:2s,6s; -webkit-transition-duration:2s,6s; -o-transition-duration:2s,6s; transition-delay:2s,6s; -moz-transition-delay:2s,6s; -webkit-transition-delay:2s,6s; -o-transition-delay:2s,6s; } #thediv:hover{ width:500px; height:200px; } </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)  492360 permainan