CSS3動畫變形transition

時間 2019-11-12

標籤 css3 css 動畫變形 transition 欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS3變形transition</title>
    </head>
    <style>
        /*div#translate {
            width: 300px;
            height: 300px;
            background: #9D9D9D;
        }
        div#translate:hover{
            -webkit-transform:translate(100px,100px) scale(2,2) rotate(45deg) skew(30deg,30deg);
            !*先x，y移動100培訓  縮放2倍  旋轉45度 skew傾斜 *!
        }*/
        div#transition{
            width:200px;
            height:200px;
            background-color: green;
            /*-webkit-transition:none 1s linear 0s;*/
            /*-webkit-transition:all 1s linear 0s;*/
            /*transition 屬性 變換延續時間  速率變化 延遲時間,屬性 變換延續時間  速率變化 延遲時間*/
            -webkit-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            -moz-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            -ms-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            -o-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
        }
        div#transition:hover{
            background-color: #3598DC;
            width:400px;
            height: 400px;
        }


    </style>
    <body>
        <div id="transition"></div>
        
        <!--<div id="rotat">rotate旋轉</div>-->
        <!--<div id="scale">scale縮放</div>-->
        <!--<div id="skew">skew 傾斜</div>-->
        <!--<div id="translate">translate移動</div>-->
        <!--<p>旋轉，傾斜 縮放 移動 transform</p>-->
    </body>

</html>

CSS3變形transitionhtml

相關標籤/搜索