1. 程式人生 > >CSS 小結筆記之變形、過渡與動畫

CSS 小結筆記之變形、過渡與動畫

  • transition-delay 延遲時間,單位為s或ms
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title
> <style> div { width: 100px; height: 200px; background-color: aqua; transition: width 2s ease-in-out 0.5s; } div:hover { width: 500px; } </style> </head> <body> <
div></div> </body> </html>
View Code

結果如下,當滑鼠上上去後變化不再是瞬間完成,而是過渡完成。

2、變形 transform

(1)、2D變形

  (a)移動 translate(x,y)

      移動可以指定畫素值也可以指定百分比,注意:指定百分比是自身大小的百分比,因此可以用於設定盒子定位置的居中對齊(在設定left:50%後再移動自身的-50%即可)。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset
="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: aqua; transition: all 2s; } div:active { transform: translate(200px, 200px); } </style> </head> <body> <div></div> </body> </html>
View Code

      

點選之後盒子進行了移動。用於讓定位的盒子居中的程式碼入下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: all 0.5s;
            position: relative;
        }
        
        .son {
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            transform: translate(-50%, -50%);
        }

    </style>
</head>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>

</body>

</html>
View Code

      結果為     

     

  (b)縮放 scale(x,y)

      x,y設定大於1 是放大,小於1 是縮小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
        }
        
        div:hover {
            transform: scale(0.5, 2);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>
View Code

      

  (c)旋轉 rotate(x deg)

     x指定度數值,正數是順時針旋轉,負數是逆時針旋轉。

    旋轉可以使用transform-origin 指定旋轉中心點,transform-origin 給left top right bottom 也可以指定具體的畫素值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotate(120deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
View Code

      

  (d)傾斜 skew(x deg ,y deg)

        x,y分別指定傾斜在x,y方向上的角度,可以為負數。y值不寫預設為0。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid red;
            transition: all 1s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
View Code

      

(2)3D變形

  (a)旋轉(rotateX,rotateY,rotateZ)

    3D旋轉與2D類似,只不過一個是基於二位座標一個是基於三維座標。三個值可以同時指定也可以單獨指定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotateX(120deg);
            /* transform: rotateY(120deg); */
            /* transform: rotateZ(120deg); */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>        
View Code

  (b)移動(translateX,translateY,translateZ)

    3D移動對於xy方向上的移動與2d移動一致。只有z方向上的移動不一樣。Z方向上的移動在現實生活中是距離變遠,距離變近。因此在網頁中顯示結果是變近則變大,變遠則變小。

    要使Z放線上移動生肖首先要設定perspective(眼睛距離螢幕的距離);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
            /* 數值越小說明眼睛離的越近 */
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 0.5s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: translate3d(0, 0, 200px);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>
View Code

    

3、動畫 animation

  (1)、animation: animation-name ||animation-duration|| animation-timing-function ||animation-delay ||animation-iteration-count|| animation-direction|| animation-fill-mode; animation-name:動畫名稱(自己使用@keyframes 定義的動畫)    animation-duration:持續時間    animation-timing-function:運動曲線,與過渡的運動曲線類似。    animation-delay:延遲時間    animation-iteration-count:迴圈次數 (infinite 是無限迴圈)    animation-direction :是否反向(動畫是否是由結尾倒開是倒著放的)    animation-fill-mode:設定在動畫播放之外的狀態(結束時的狀態)none | forwards(設為結束時的狀態)| backwards(設為開始時的狀態)|both(設為開始或結束時的狀態)    animation-play-state:設定動畫狀態 running 開始|paused 暫停   (2)、@keyframes 自定義動畫 格式如下     
@keyframes 動畫名稱 {
from{ 開始} 0%
to{ 結束 } 100%
}

可以用 from...to 來指定動畫過程,也可以用0%~100%指定動畫過程。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* animation: 動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向 */
            animation: move 5s linear 3;
        }
        
        @keyframes move {
            0% {
                transform: translate3d(0, 0, 0);
            }
            25% {
                transform: translate3d(400px, 0, 0);
            }
            50% {
                transform: translate3d(400px, 300px, 0);
            }
            75% {
                transform: translate3d(0, 300px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
View Code