亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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中文網(wǎng)(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>該實(shí)例無法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠標(biāo)移動(dòng)到圖標(biāo)上，查看過渡效果。</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中文網(wǎng)(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>該實(shí)例無法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠標(biāo)移動(dòng)到 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>