1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > HTML >
        • html5教程之css教程之transition-property [過渡的CSS屬性]

        本站最新發布   Python從入門到精通|Python基礎教程
        試聽地址  
        http://www.squ68.com/eschool/python.html


        transform呈現的是一種變形結果,而Transation呈現的是一種過渡,通俗點說就是一種動畫轉換過程,如漸顯、漸弱、動畫快慢等。transition和transform是兩種不同的動畫模型。http://www.w3.org/TR/css3-transitions/

        transition可以和Transform同時使用。

        transition是一個復合屬性,可以同時定義transition-property、transition-duration、transition-timing-function、transition-delay子屬性值。

        語法

        transition-property: all | none | <property>[ ,<property> ]*;設置要以動畫方式變換的CSS屬性。
        語法項目 說明
        初始值 all
        適用于 所有元素,以及:before和:after偽元素
        可否繼承
        媒介 視覺
        版本 CSS3.0

        說明

        transition-property可以設置要以動畫方式變換的CSS屬性,默認值all表示變換所有的屬性,如果只針對單個或者多個CSS屬性進行變換,就可以用這個屬性來進行單獨設置。

        取值

        all:表示針對所有元素。

        none:表示沒有元素。

        ident:指定CSS屬性列表

        實例代碼

        CSS
        
        				
        1. .transition_property_1{
        2.     -webkit-transition:0.5s ease;
        3.     -moz-transition:0.5s ease;
        4.     -webkit-transition-property:all;
        5.     -moz-transition-property:all;
        6.     position:absolute;
        7.     left:10px;
        8.     top:50px;
        9. }
        10. .transition_property_2{
        11.     -webkit-transition:0.5s ease;
        12.     -moz-transition:0.5s ease;
        13.     -webkit-transition-property:none;
        14.     -moz-transition-property:none;
        15.     position:absolute;
        16.     left:250px;
        17.     top:50px;
        18. }
        19. .transition_property_3{
        20.     -webkit-transition:0.5s ease;
        21.     -moz-transition:0.5s ease;
        22.     -webkit-transition-property:width;
        23.     -moz-transition-property:width;
        24.     position:absolute;
        25.     left:480px;
        26.     top:50px;
        27. }
        28.  
        29. .transition_property_1:hover,
        30. .transition_property_2:hover,
        31. .transition_property_3:hover{
        32.     width:500px;
        33.     height:300px;
        34. }
        復制
        HTML
        
        				
        1. <div class="demo_box transition_property_1">變換所有的屬性</div>
        2. <div class="demo_box transition_property_2">不變換任何屬性</div>
        3. <div class="demo_box transition_property_3">只變換寬度屬性</div>
        復制
        運行一下 »     高級版運行一下 »

        兼容性

        IE Firefox Opera Safari Chrome
        IE 10+ Firefox 3.7+ Opera 10.50+ Safari 3.2+ Chrome 2.0+

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看