DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 深入了解transition屬性
深入了解transition屬性
編輯:CSS3基礎     

在之前的課程中,實現CSS3過渡效果,我們都是僅僅針對一個CSS屬性來操作。其實在CSS3中,我們可以使用transition屬性同時對多個CSS屬性進行實現平滑過渡效果。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>深入了解transition屬性</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:100px;
            border-radius:0;
            background-color:#14C7F3;
            transition-property:border-radius,background-color;
            transition-duration:1s ;
            transition-timing-function:linear;
            transition-delay:2s;
        }
        div:hover
        {
            border-radius:50px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

當鼠標移動到div元素上方時,div元素會在1s時間內同時對border-radius和background-color這兩個屬性產生過渡效果。

如果想要使用transition屬性同時對多個屬性進行實現平滑過渡效果,只需要在transition-property屬性添加多個屬性名即可,其中屬性名之間用英文逗號隔開。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved