masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Peralihan CSS3

Peralihan CSS3

Peralihan CSS3

Dalam CSS3, kita boleh menukar dari satu gaya ke gaya yang lain untuk menambah kesan tertentu 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 matlamat ini, dua perkara mesti dinyatakan:

Nyatakan sifat CSS yang mana kesannya akan ditambah dan nyatakan tempoh kesan. 

<!DOCTYPE html>     
<html>     
<head>     
    <meta charset="UTF-8">     
    <title>TransitionDemo</title>     
    <style>     
        #wrapper {     
            width: 1024px;     
            margin: 0 auto;     
        }     
        .progress-bar-bg {     
            width: 960px;     
            /*background-color: aliceblue;*/     
            background-color: lightyellow;     
        }     
        .progress-bar {     
            height: 40px;     
            width: 40px;     
            background-color: #69C;     
     
            border: 1px solid lightyellow;     
            border-radius: 5px;     
        }     
        .progress-bar:hover {     
            width: 960px;     
        }     
     
        #bar1 {     
            -webkit-transition: width 5s linear;     
            /*-webkit-transition: width 5s steps(6, end);*/     
            /*-webkit-transition: width 5s step-start;*/     
        }     
        #bar2 {     
            -webkit-transition: width 5s ease;     
        }     
        #bar3 {     
            -webkit-transition: width 5s ease-in;     
        }     
        #bar4 {     
            -webkit-transition: width 5s ease-out;     
        }     
        #bar5 {     
            -webkit-transition: width 5s ease-in-out;     
        }     
    </style>     
</head>     
<body>     
<div id="wrapper">     
    <p>linear</p>     
    <div>     
        <div id="bar1"></div>     
    </div>     
     
    <p>ease</p>     
    <div id="bar2"></div>     
     
    <p>ease-in</p>     
    <div id="bar3"></div>     
     
    <p>ease-out</p>     
    <div id="bar4"></div>     
     
    <p>ease-in-out</p>     
    <div id="bar5"></div>     
</div>     
</body>     
</html>

Berbilang perubahan

Untuk menambah berbilang gaya kesan transformasi, atribut tambahan dipisahkan dengan koma: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -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>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠标移动到图标上，查看过渡效果。</div>
</body>
</html>

Atribut peralihan

Senarai jadual berikut Semua atribut peralihan disenaraikan:


Atribut CSS


atribut Shorthand peralihan, digunakan dalam atribut Tetapkan empat sifat peralihan . 3

Transition-PROPERTY menentukan nama atribut CSS untuk menggunakan peralihan. 3

Tempoh Peralihan menentukan masa untuk kesan peralihan. Lalai ialah 0. 3

Fungsi-Masa-Peralihan menentukan lengkung masa bagi kesan peralihan. Lalai ialah "kemudahan". 3

tunda peralihan menentukan bila kesan peralihan bermula. Lalai ialah 0. 3

<一> Semua atribut peralihan digunakan dalam satu contoh: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div
{
width:100px;
height:100px;
background:red;
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>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
</body>
</html>

Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TransitionDemo</title> <style> #wrapper { width: 1024px; margin: 0 auto; } .progress-bar-bg { width: 960px; /*background-color: aliceblue;*/ background-color: lightyellow; } .progress-bar { height: 40px; width: 40px; background-color: #69C; border: 1px solid lightyellow; border-radius: 5px; } .progress-bar:hover { width: 960px; } #bar1 { -webkit-transition: width 5s linear; /*-webkit-transition: width 5s steps(6, end);*/ /*-webkit-transition: width 5s step-start;*/ } #bar2 { -webkit-transition: width 5s ease; } #bar3 { -webkit-transition: width 5s ease-in; } #bar4 { -webkit-transition: width 5s ease-out; } #bar5 { -webkit-transition: width 5s ease-in-out; } </style> </head> <body> <div id="wrapper"> <p>linear</p> <div class="progress-bar-bg"> <div class="progress-bar" id="bar1"></div> </div> <p>ease</p> <div class="progress-bar" id="bar2"></div> <p>ease-in</p> <div class="progress-bar" id="bar3"></div> <p>ease-out</p> <div class="progress-bar" id="bar4"></div> <p>ease-in-out</p> <div class="progress-bar" id="bar5"></div> </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)  492464 permainan