2. 程式人生 > >CSS變形動畫

CSS變形動畫

阿新 • • 發佈：2020-07-21

CSS變形動畫

前言

　　在開始介紹CSS變形動畫之前，可以先了解一下學習了它之後能做什麼，有什麼用，這樣你看這篇文章可能會有一些動力。

　　學習了CSS變形動畫後，你可以為你的頁面做出很多炫酷的效果，如一個3D的魔方，一個很酷的旋轉選單等等。

　　在本章節中將會採用大量的例項進行演示，相信你如果看完這篇文章後寫出的頁面會更加的吸引眼球。

 

 

 

基礎知識

座標系統

　　首先我們要學習的變形動畫，想達到在上圖中出現的3D效果單純的X與Y兩個軸是實現不了的，還需要加入一條縱深軸，即Y軸的參與才有一個3D的視覺感受。

　　那麼如何來理解X,Y,Z這三條軸的關係呢？可以看一下下面這張圖。

 

　　X軸代表水平軸

　　Y軸代表垂直軸

　　Z軸代表縱深軸

 

 

　　X和Y軸都非常好理解，怎麼理解這個Z軸呢？

　　CSS的中文名稱叫做層疊樣式表，那麼它肯定是一層一層的。之前學習過z-index就是用來設定層的優先順序，優先順序越高越在上面，也可以理解為離我們肉眼越近，它把優先順序低的層給蓋住了，所以Z軸可以理解為我們觀察的視角與被觀察物體之間的一條軸。

　　Z軸數值越大，說明觀測距離越遠。

　　Z軸的數值可以無限大，所以設定的時候一定要小心。

 

變形操作

　　可以使用transform規則控制元素的變形操作，包括元素移動、旋轉、傾斜、3D轉換等等。

　　下表中是CSS提供的變形動作，在接下來的學習中將會對一個變形動作進行詳解。

 

選項說明
none 定義不進行轉換。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x,y) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設定 X 軸的值來定義縮放轉換。
scaleY(y) 通過設定 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設定 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在引數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視檢視。

 

變形疊加

　　這其實是一個坑點，在使用變形中一定要注意，重複對元素設定變形操作時只在元素的原形態上操作。

　　我們可以先看一下下面的案例，不懂程式碼沒關係，懂這個意思就行了。

 

　　預設處理

　　下面設定了兩次移動，並不會移動550px 而是隻移動50px。

　　我們在元素中先設定了右移500px，滑鼠放上去時再往右移動50px，可是下面卻出現了向左移動的場景，這是因為對div進行了位置居中處理，它必須要按照之前居中的位置進行50px的移動。而不是按照居中後設置的500px的地方再進行向右移動50px。

　　上面這句話有點繞，總之。上面設定了，位置改變了，下面再設定，不會按照已改變的位置進行變化，而是按照原位置。

 

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
​
        <style>
​
                *{
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                        list-style: none;
                }
​
                body {
                        height: 100vh;
                        width: 100vw;
                        
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
​
                div{
                        width: 200px;
                        height: 200px;
                        
                        /* 意思就是說按x軸移動500px */
                        transform: translateX(500px);
                        /* 過渡時間2s */
                        transition: 2s;
​
                }
​
                div:hover{
                         /* 意思就是說按x軸移動50px */
                        transform: translateX(50px);
                }
​
        </style>
</head>
​
<body>
​
        <div></div>
​
</body>
​
</html>
程式碼示例

 

偽類疊加

　　還是設定兩次移動，如果移動的方向都一樣，且偽類設定的移動比原本的移動多一點，就在原本的基礎上直接進行變形，而不用再找開始位置了。

　　我們還是拿上面的案例，只不過偽類移動的數值將50px改為600px，比第一次設定大100px，那麼此時他就不會再往左走，而是直接在原有基礎上進行疊加，向右移動100px。

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
​
        <style>
​
                *{
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                        list-style: none;
                }
​
                body {
                        height: 100vh;
                        width: 100vw;
                        
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
​
                div{
                        width: 200px;
                        height: 200px;
                        
                        /* 意思就是說按x軸移動500px */
                        transform: translateX(500px);
                        /* 過渡時間2s */
                        transition: 2s;
​
                }
​
                div:hover{
                         /* 意思就是說按x軸移動600px */
                        transform: translateX(600px);
                }
​
        </style>
</head>
​
<body>
​
        <div></div>
​
</body>
​
</html>
程式碼示例

 

內聯元素

　　內聯元素即行級元素，inline元素是不能參與變形的，將其轉為 inline-block 或 block 以及彈性元素時才可以產生變化效果。

 

:hover偽類

　　滑鼠移動到某一元素上發生的使用者行為。

　　當該行為出現時，我們可以為它指定一些引數的改變。

 

　　如下，改變顏色。

 

 

:target偽類

　　意思就是說你點選一個<a>，該<a>標籤中的href指向的錨點標籤會發生變化。

　　點選第一個<a>元素，與之相對的錨點元素髮生變化。

　　點選第二個<a>元素，與第一個<a>元素相對的錨點變化停止，與第二個<a>元素相對的錨點發生變化。

 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                 * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }
​
                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;
                }
​
                div{
                        width: 200px;
                        height: 200px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #fff;
                        font-size: 2em;
                }
​
                div:nth-child(1) {
                        background:red;
​
                }
                div:nth-child(2) {
                        background:blue;
​
                }
                #div-1:target{
                        
                }
                #div-2:target{
                        
                }
        </style>
</head>
<body>
        <div id="div-1">原本顏色：紅</div>
        <div id="div-2">原本顏色：藍</div>
        <a href="#div-1">讓div-1變綠</a>
        <a href="#div-2">讓div-2變黑</a>
</body>
</html>
程式碼示例

 

最後注意一點

　　事件元素上放過渡時間，:hover上放具體的事件，如移動，旋轉，傾斜等操作。

　　如果你設定了移動卻將過渡時間放在了:hover裡面，那麼就會出現下面這種情況。

　　可以看見，直勾勾的就回來了，這種效果顯然不是我們想要的。

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }
​
                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
​
                main {
                        width: 400px;
                        height: 200px;
                        border: 1px solid #ccc;
                        display: flex;
                        justify-content: center;
                        align-items: center;
​
                        /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
                        position: relative;
                }
​
                div:first-child {
                        height: 8px;
                        width: 8px;
                        
​
                        z-index: 1;
                        border-radius: 50%;
​
                        /* 脫離文件流並居中 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin-left: -4px;
                        margin-top: -4px;
​
                }
​
                div:last-child {
                        height: 100px;
                        width: 100px;
                        
                        /* 過渡時間1s,應該放這裡，而不是:hover上面 */
                        /* transition: 1s; */
                       
                }
​
                 div:last-child:hover {
                        transform: translateX(100px);
                }
                
        </style>
</head>
​
<body>
        <main>
                <div></div>
                <div></div>
        </main>
</body>
​
</html>
程式碼示例

 

移動元素

 

  • 沿X軸移動時正值向右移動、負值向左移動

  • 沿Y軸移動時正值向下移動、負值向上移動

  • 如果使用百分數將控制元素的原尺寸計算百分比然後移動

  • 可同時設定多個值，解析器會從左向右依次執行

  • 變形是在原基礎上更改，即第二次設定值時不是在第一次值上變化

 

translateX

　　控制元素在X軸上的移動，正值向右、負值向左。

　　如，我們下面設定translateX(100px)，過渡時間為1s。

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }
​
                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
​
                main {
                        width: 400px;
                        height: 200px;
                        border: 1px solid #ccc;
                        display: flex;
                        justify-content: center;
                        align-items: center;
​
                        /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
                        position: relative;
                }
​
                div:first-child {
                        height: 8px;
                        width: 8px;
                        
​
                        z-index: 1;
                        border-radius: 50%;
​
                        /* 脫離文件流並居中 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin-left: -4px;
                        margin-top: -4px;
​
                }
​
                div:last-child {
                        height: 100px;
                        width: 100px;
                        
                        /* 過渡時間1s,應該放這裡，而不是:hover上面 */
                        transition: 1s;
                       
                }
​
                div:last-child:hover {
                        transform: translateX(100px);
                }
                
        </style>
</head>
​
<body>
        <main>
                <div></div>
                <div></div>
        </main>
</body>
​
</html>
程式碼示例

 

translateY

　　控制元素在X軸上的移動，正值向下、負值向上。

　　如，我們下面設定translateY(100px)，過渡時間為1s。

<!DOCTYPE html>
<html lang="en">
​
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }
​
                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
​
                main {
                        width: 200px;
                        height: 400px;
                        border: 1px solid #ccc;
                        display: flex;
                        justify-content: center;
                        align-items: center;
​
                        /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
                        position: relative;
                }
​
                div:first-child {
                        height: 8px;
                        width: 8px;
                        
​
                        z-index: 1;
                        border-radius: 50%;
​
                        /* 脫離文件流並居中 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin-left: -4px;
                        margin-top: -4px;
​
                }
​
                div:last-child {
                        height: 100px;
                        width: 100px;
                        
                        /* 過渡時間1s,應該放這裡，而不是:hover上面 */
                        transition: 1s;
                       
                }
​
                div:last-child:hover {
                        transform: translateY(100px);
                }
​
        </style>
</head>
​
<body>
        <main>
                <div></div>
                <div></div>
        </main>
</body>
​
</html>
程式碼示例

 

translate

　　translate是translateX以及translateY的簡寫模式，第一個值控制X移動，第二個值控制Y移動。

　　一句話，設定X與Y軸的移動，注意，這個方法中不包含Z軸，因為一旦有Z軸參與就會變為3D效果。

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }
​
                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
​
                main {
                        width: 400px;
                        height: 400px;
                        border: 1px solid #ccc;
                        display: flex;
                        justify-content: center;
                        align-items: center;
​
                        /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
                        position: relative;
                }
​
                div:first-child {
                        height: 8px;
                        width: 8px;
                        
​
                        z-index: 1;
                        border-radius: 50%;
​
                        /* 脫離文件流並居中 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin-left: -4px;
                        margin-top: -4px;
​
                }
​
                div:last-child {
                        height: 100px;
                        width: 100px;
                        
                        /* 過渡時間1s,應該放這裡，而不是:hover上面 */
                        transition: 1s;
                       
                }
​
                div:last-child:hover {
                        /* 先設定X軸，再設定Y軸 */
                        transform: translate(100px,100px);
                }
​
        </style>
</head>
​
<body>
        <main>
                <div></div>
                <div></div>
        </main>
</body>
​
</html>
程式碼示例

 

百分比移動

　　當要移動的元素寬高為100px時，如果使用50%進行移動，則代表移動50px。

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }
​
                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
​
                main {
                        width: 400px;
                        height: 400px;
                        border: 1px solid #ccc;
                        display: flex;
                        justify-content: center;
                        align-items: center;
​
                        /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
                        position: relative;
                }
​
                div:first-child {
                        height: 8px;
                        width: 8px;
                        
​
                        z-index: 1;
                        border-radius: 50%;
​
                        /* 脫離文件流並居中 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin-left: -4px;
                        margin-top: -4px;
​
                }
​
                div:last-child {
                        height: 100px;
                        width: 100px;
                        
                        /* 過渡時間1s,應該放這裡，而不是:hover上面 */
                        transition: 1s;
                       
                }
​
                div:last-child:hover {
                        /* 先設定X軸，再設定Y軸 */
                        transform: translate(50%,50%);
                }
​
        </style>
</head>
​
<body>
        <main>
                <div></div>
                <div></div>
        </main>
</body>
​
</html>
程式碼示例

 

元素居中

　　我們之前介紹過很多元素居中的方法，如定位操作，彈性盒模型，其實使用移動也可以達到元素居中的效果。

　　給你丟一套模板。

 

/* 讓子元素脫離文件流並參照副父級元素偏移。這是定位+margin的居中方法 */
position: absolute;
left: 50%;
top: 50%;
/* left和top設定子元素寬高的負的50%就行 */
margin-left: -3px;
margin-top: -3px;

 

/* 這是彈性盒模型控制元素居中的方法 */
display: flex;
justify-content: center;
align-items: center;

 

/* 讓子元素脫離文件流並參照副父級元素偏移。這是定位+移動的居中方法 */
position: absolute;
left: 50%;
top: 50%;
/* X和Y設定子元素寬高的負的50%就行 */
transform: translate(-50%, -50%);

 

 

translateZ

　　控制Z軸移動，正數向外（距離我們近）、負數向裡移動（距離我們遠）。因為Z軸是透視軸沒有像X/Y一樣的固定尺寸，所以不能使用百分數。

 

 

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }

                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }

                main {
                        width: 200px;
                        height: 200px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #ccc;

                        /* 如果將Z軸移動的:hover放在div上，我們不方便一直將滑鼠放在div上面，故我們設定成放在main上面讓div進行Z軸移動 */
                        /* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照Y軸旋轉60度，按Z軸放大5倍*/
                        transform: perspective(900px) rotateY(60deg) scaleZ(5);
                        /* 使用 transform-style 用於控制3d透視 */
                        transform-style: preserve-3d;

                }


                main:hover div:nth-child(2) {
                        transform: translateZ(-100px);
                }

                div {
                        height: 100px;
                        width: 100px;
                        background-color: blueviolet;

                        /* 讓子元素脫離文件流並參照副父級元素偏移。這是定位+移動的居中方法 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                }

                div:nth-child(1) {
                        background-color: yellow;

                }

                div:nth-child(2) {
                        background-color: blueviolet;
                        /* 過渡時間1s */
                        transition: 1s;
                }
        </style>
</head>

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

</html>
程式碼示例

 

translate3d

　　用於同時控制X/Y/Z軸的移動，三個值必須輸入如果某個軸不需要移動時設定為零。

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }

                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }

                main {
                        width: 200px;
                        height: 200px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #ccc;

                        /* 如果將Z軸移動的:hover放在div上，我們不方便一直將滑鼠放在div上面，故我們設定成放在main上面讓div進行Z軸移動 */
                        /* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照Y軸旋轉60度，按Z軸放大5倍*/
                        transform: perspective(900px) rotateY(60deg) scaleZ(5);
                        /* 使用 transform-style 用於控制3d透視 */
                        transform-style: preserve-3d;

                }


                main:hover div:nth-child(2) {
                        /* 由於Z軸可以無限遠，所以不能用百分比 */
                        transform: translate3d(50%, 50%, 100px);
                }

                div {
                        height: 100px;
                        width: 100px;
                        background-color: blueviolet;

                        /* 讓子元素脫離文件流並參照副父級元素偏移。這是定位+移動的居中方法 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                }

                div:nth-child(1) {
                        background-color: yellow;

                }

                div:nth-child(2) {
                        background-color: blueviolet;
                        /* 過渡時間1s */
                        transition: 1s;
                }
        </style>
</head>

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

</html>
程式碼示例

 

漸變輸入框

 

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }

                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #34495e;
                }

                #form-style-gradient {
                        width: 200px;
                        height: 200px;
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #ccc;

                }

                #form-style-gradient label input {

                        padding: 10px;
                        outline: none;
                        border: none;
                        background-color: #ecf0f1;



                }

                #form-style-gradient label {
                        width: 80%;
                        position: relative;
                        overflow: hidden;
                        margin-bottom: 20px;
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-self: center;
                }

                #form-style-gradient label::before {
                        content: '';
                        position: absolute;
                        /* 移動到最下面 */
                        left: 0;
                        bottom: 0;

                        height: 2px;
                        width: 100%;

                        background: linear-gradient(to right, white, #1abc9c, #f1c40f, #e74c3c, white);
                        /* 移動到label標籤外，然後會被隱藏掉 */
                        transform: translateX(-100%);
                        transition: 2s;

                }


                #form-style-gradient label:hover::before {
                        /* 移動回來 */
                        transform: translateX(100%);
                }

        </style>
</head>

<body>

        <form id="form-style-gradient" action="">
                <label>
                        <input type="text" name="username" placeholder="請輸入使用者名稱">
                </label>
                <label>
                        <input type="text" name="pwd" placeholder="請輸入密碼">
                </label>
        </form>

</body>

</html>
程式碼示例

 

頁面切換

 

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
                * {
                        padding: 0;
                        margin: 0;
                }

                a {
                        text-decoration: none;
                }

                body {
                        display: flex;
                        width: 100vw;
                        height: 100vh;
                        flex-direction: column;
                }

                main {
                        position: relative;
                        background: #f3f3f3;
                        flex: 1;
                        overflow: hidden;
                }

                nav {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        height: 8vh;
                        text-align: center;
                        background: #34495e;
                }

                nav a {
                        flex: 1;
                        font-size: 1.3em;
                        text-transform: uppercase;
                        font-weight: bold;
                        opacity: .8;
                        color: white;
                }

                nav a:nth-child(2) {
                        border-right: solid 1px #aaa;
                        border-left: solid 1px #aaa;
                }

                main>div {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        transition: all 1s;
                        z-index: 1;
                        background: #f3f3f3;
                        opacity: 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        transform: translate(0, -100%);
                        color: white;
                        font-size: 2em;
                }

                main>div:target {
                        opacity: 1;
                        transform: translate(0%, 0%);
                }

                main>div:nth-of-type(1):target {
                        background: #3498db;
                }

                main>div:nth-of-type(2):target {
                        background: #9b59b6;
                }

                main>div:nth-of-type(3):target {
                        background: #16a085;
                }

                div i[class^="fa"] {
                        font-size: 100px;
                        color: white;
                }
        </style>
</head>

<body>
        <main>
                <div id="home">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        houdunren.com
                </div>
                <div id="video">
                        <i class="fa fa-vimeo" aria-hidden="true"></i>
                </div>
                <div id="live">
                        <i class="fa fa-viadeo" aria-hidden="true"></i>
                </div>
        </main>
        <nav>
                <a href="#home">home</a>
                <a href="#video">video</a>
                <a href="#live">live</a>
        </nav>
</body>

</html>
程式碼示

 

縮放元素

　　比如數值為2時表示為原尺寸的兩倍。

　　數值為.5時為原尺寸的一半。

 

scaleX

　　按X軸縮放一半。

 

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }

                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }

                main {
                        width: 400px;
                        height: 200px;
                        border: 1px solid #ccc;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
                        position: relative;
                }

                div:first-child {
                        height: 8px;
                        width: 8px;
                        background-color: black;

                        z-index: 1;
                        border-radius: 50%;

                        /* 脫離文件流並居中 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin-left: -4px;
                        margin-top: -4px;

                }

                div:last-child {
                        height: 100px;
                        width: 100px;
                        background-color: blueviolet;
                        /* 過渡時間1s,應該放這裡，而不是:hover上面 */
                        transition: 1s;
                       
                }

                div:last-child:hover {
                        transform: scaleX(.5);
                }
                
        </style>
</head>

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

</html>
程式碼示例

 

scaleY

　　按Y軸縮放一半。

 

 

scale

　　使用 scale 可同時設定 X/Y 軸的縮放，如果只設置一個值時表示兩軸縮放相同。

　　使用數值定義縮放，如 .5 表示縮小一半，2 表示放大兩倍。

 

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }

                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }

                main {
                        width: 200px;
                        height: 400px;
                        border: 1px solid #ccc;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
                        position: relative;
                }

                div:first-child {
                        height: 8px;
                        width: 8px;
                        background-color: black;

                        z-index: 1;
                        border-radius: 50%;

                        /* 脫離文件流並居中 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin-left: -4px;
                        margin-top: -4px;

                }

                div:last-child {
                        height: 100px;
                        width: 100px;
                        background-color: blueviolet;
                        /* 過渡時間1s,應該放這裡，而不是:hover上面 */
                        transition: 1s;
                       
                }

                div:last-child:hover {
                        transform: scale(.5,2);
                }

        </style>
</head>

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

</html>
程式碼示例

 

scaleZ

　　沿Z軸縮放元素，需要有3D透視才可以檢視到效果。

 

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }

                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }

                main {
                        width: 200px;
                        height: 200px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #ccc;

                        /* 如果將Z軸移動的:hover放在div上，我們不方便一直將滑鼠放在div上面，故我們設定成放在main上面讓div進行Z軸移動 */
                        /* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照Y軸旋轉60度，按Z軸放大5倍*/
                        transform: perspective(900px) rotateY(45deg) scaleZ(5);
                        /* 使用 transform-style 用於控制3d透視 */
                        transform-style: preserve-3d;

                }


                main:hover div:nth-child(2) {
                        /* 放大5倍 */
                        transform: scaleZ(5);
                }

                div {
                        height: 100px;
                        width: 100px;
                        background-color: blueviolet;

                        /* 讓子元素脫離文件流並參照副父級元素偏移。這是定位+移動的居中方法 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                }

                div:nth-child(1) {
                        background-color: yellow;

                }

                div:nth-child(2) {
                        background-color: blueviolet;
                        /* 過渡時間1s */
                        transition: 1s;
                        transform: translateZ(100px);
                }
        </style>
</head>

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

</html>
程式碼示例

 

scale3d

　　沿X/Y/Z三個軸縮放元素。

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
                * {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        box-sizing: border-box;
                }

                body {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }

                main {
                        width: 200px;
                        height: 200px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #ccc;

                        /* 如果將Z軸移動的:hover放在div上，我們不方便一直將滑鼠放在div上面，故我們設定成放在main上面讓div進行Z軸移動 */
                        /* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照Y軸旋轉60度，按Z軸放大5倍*/
                        transform: perspective(900px) rotateY(45deg) scaleZ(5);
                        /* 使用 transform-style 用於控制3d透視 */
                        transform-style: preserve-3d;

                }


                main:hover div:nth-child(2) {
                        /* 放大5倍 */
                        transform: scale3d(.5,.5,.5);
                }

                div {
                        height: 100px;
                        width: 100px;
                        background-color: blueviolet;

                        /* 讓子元素脫離文件流並參照副父級元素偏移。這是定位+移動的居中方法 */
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                }

                div:nth-child(1) {
                        background-color: yellow;

                }

                div:nth-child(2) {
                        background-color: blueviolet;
                        /* 過渡時間1s */
                        transition: 1s;
                        transform: translateZ(100px);
                }
        </style>
</head>

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

</html>
程式碼示例

 

選單縮放

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_v8yodek5od.css">
        <style>
                *{
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        box-sizing: border-box;
                        text-decoration: none;
                }
                
                body{
                        height: 100vh;
                        width: 100vw;
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;
                }

                main{
                        width: 100px;
                }



                div i{
                        display: inline-block;
                        background: darkgray;
                        font-size: 30px !important;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }


                ul{
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #ddd;
                        text-transform: uppercase;
                        /* 基點設定為左上 */
                        transform-origin: left top;
                        /* 滑鼠放上去有個小手 */
                        cursor: pointer;
                        /* 透明度 */
                        opacity: .6;
                        transform: scale(0);
                        transition: 1s;
                }

                ul>*{
                        margin: 3px;
                       
                }

                main:hover ul{
                        transform: scale(1);
                        
                }
        </style>
</head>
<body>
        <main>
                <div>
                        <i class="iconfont icon-dingbudaohang-zhangh"></i>
                </div>
                <ul>
                        <li><a href=""></a>我的資料</li>
                        <li><a href=""></a>我的關注</li>
                        <li><a href=""></a>我的收藏</li>
                </ul>
        </main>

</body>
</html>
程式碼示例

 

相簿放大

 

 

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

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                * {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        box-sizing: border-box;
                        text-decoration: none;
                }

                body {
                        height: 100vh;
                        width: 100vw;
                        display: flex; 
                        justify-content: center;
                        align-items: center;
                        background-color: deepskyblue;
                }

                img{
              
                        height: 100px;
                        /* 高斯模糊 */
                        filter: blur(10px);
                        transform: scale(.6);
                        transition: .5s;
                        /* 滑鼠小手 */
                        cursor: pointer;
                        border: 3px double black;
                }
                img:hover{
                        filter: none;
                        transform: scale(1.3);
                }

        </style>
</head>

<body>
        <img src="./22.jpg" alt="">
        <img src="./33.jpg" alt="">
        <img src="./初音.jpg" alt="">
</body>

</html>
程式碼示例

 

旋轉元素

　　使用CSS可以控制元素按照不同座標軸進行旋轉。

 

rotateX

　　控制元素按照X軸進行旋轉操作。單位為deg，即°度的意思。

　　按水平軸發生旋轉，如果旋轉90deg 將不可見。

　　正數向上翻，負數向下翻。

 

 

　　如何讓他可見呢？我們只需要將父級容器也旋轉一下

相關推薦

CSS 變形動畫 水平，垂直翻轉元素

tex rspec ica top ane 發生 偏移 spec span CSS3的2D變形屬性，scale：用來縮放元素（放大和縮小），translate:在屏幕上移動元素（上下左右），rotate:按照一定角度旋轉元素（單位為度），skew:沿X和Y軸對元素進行斜切，

CSS變形動畫

CSS變形動畫 前言 　　在開始介紹CSS變形動畫之前，可以先了解一下學習了它之後能做什麼，有什麼用，這樣你看這篇文章可能會有一些動力。 　　學習了CSS變形動畫後，你可以為你的頁面做出很多炫酷的效果，如一個3D的魔方，一個很酷的旋轉選單等等。 　　在本章節中將會採用大量的例項進行演示，相信你如果看完這

css簡單動畫

iter div cti 不重復 .cn 時間 跟著 移動 路徑 這幾天公司需要更新一個移動端web的頁面，因為任務簡單，就交給作為菜鳥新人的我來做。第一次接觸css還是在14年剛上大一的時候跟著html一起學習的，之後就再也沒有接觸過。所以只好一邊學習，一邊

css樣式動畫

keyframes racket 5% -i 效果 css樣式 得到 bsp bracket 1.當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。 指定至少這兩個CSS3的動畫屬性綁定向一個選擇器： 規定動畫的名稱 規定動畫的時長

css的動畫

nsh 定義 下拉框 ddc 角度 100% 自定義屬性 size 開始 css的動畫是作用於div，給div加css動畫 例如div旋轉動畫 css部分 .zhuan1{ /*動畫名字為轉1 0.3秒一次 執行一次 停止*/ animation:zhua

css 線條動畫

動畫的預覽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑鼠移入下劃線展開</titl

如何利用 CSS 的動畫原理，創作一個乒乓球對打動畫

效果預覽 線上演示 按下右側的“點選預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。 https://codepen.io/comehope/pen/rvgLzK 可互動視訊教程 此視訊是可以互動的，你可以隨時暫停視訊，編輯視訊中的程式碼。 請用 chrome, safari,

CSS 3動畫

　　CSS 3在原來的基礎上新增了變形和動畫相關的屬性，通過這些屬性可以實現以前需要大段JavaScript才能實現的功能。css 3的變形功能可以對HTML元素執行位移、旋轉、縮放、傾斜4種幾何變換，藉助於這幾種幾何變換，css 3提供了Transition動畫。Transition動畫可以控制HTML元素

css載入動畫(三)

html程式碼:   <div id="preloader_3"></div> css程式碼: #preloader_3 { position: relative; } #preloader_3:before { width: 20px; hei

css載入動畫(二)

htmll程式碼: <div id="preloader_1"> <span></span> <span></span> <span></span> <span></span>

css 載入動畫(一)

html程式碼: <section> <div class="loader loader-1"> <div class="loader-outter"></div> <div class="loader

svg 低面圖形的變形動畫

1.目標——低面圖形變形（難度：4.0） 本期我們的目標是將三角面組成的低面圖案，通過動畫，變成另外一個低面圖案.每個三角面的位置，形狀和大小顏色都會連續變化，逐漸變成另外一個圖案的三角面！ 2.分析需求——庖丁解牛 1.低面圖形通過美術工具Triangulat

CSS變形轉換-學習筆記

CSS的變形轉換 屬性：transform 一、translate-位移 常用 該屬性值有三種類型：“translateX”translateY”和“translate。“translate”可以作用於已經執行了“絕對定位（position：absolute）”的元素，而要用“positio

CSS變形轉換

變形轉換transform 能夠執行“位移”、“旋轉”、“縮放”、“傾斜”、“翻轉”和“透視”等變形轉換。 ①　位移translate ②　旋轉rotate ③　縮放scale ④　傾斜skew 組合值寫法：上面四個值不論順序如何都有效果，但是順序不同的話，效果就不同。 ⑤　矩陣matrix

CSS animation動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

CSS-形變 動畫 表格

一.形變 /*1.形變參考點: 三軸交界點*/ transform-origin: x軸座標 y軸座標; ​ /*2.旋轉 rotate deg*/ transform: rotate(720deg); ​ /*偏移 translate px*/ transform: translate

canvas+css等待動畫

使用canvas結合css實現動畫效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>circle</title> </head

CSS變形transform(2d)

前面的話  　　CSS變形transform是一些效果的集合，主要是移動、旋轉、縮放和傾斜這四種基本操作，還可以通過設定matrix矩陣來實現更復雜的效果。變形transform可以實現2D和3D兩種效果。2D變形涉及的屬性主要有transform變形函式和transform-origin變形原點。本文將詳

CSS @keyframes動畫效果

@keyframes語法： @keyframes animationname {keyframes-selector {css-styles;}} 其中animationname為動畫的名稱 keyframes-selector動畫時常百分比， 合法的值： 0-100%

MeshEditor（五） 網格頂點動畫（變形動畫）

原始碼已上傳至github，並持續更新，連結請看底部。（本帖跟隨github持續更新）網格頂點動畫（變形動畫）是針對於物體的形狀可以隨意變換並記錄為關鍵幀的動畫，雖然模型的頂點資料還是應該交給GPU繪製才是正道，CPU重新整理模型頂點始終是個吃力不討好的事（不過我好像至始至終