CSS3 skew傾斜、rotate旋轉動畫

時間 2019-11-18

標籤 css3 css skew 傾斜 rotate 旋轉動畫欄目 CSS 简体版

原文原文鏈接

css3出現以前，咱們實現一個對象的一組連續動畫須要經過JavaScript或Jquery編寫，腳本代碼較爲複雜；css

若須要實現傾斜、旋轉之類的動畫難度將更高（我還沒試過用JavaScript或Jquery如何實現），並且即便能實現估計花的時間代價及維護難度是很大的，不少時候只能依靠畫圖工具製做此類動畫文件；html

有時候在想若是不用腳本語言，也不用畫圖工做製做動畫文件，就能在網頁上實現傾斜、旋轉之類的動畫效果多好。css3

最近擠出一些業餘時間學習CSS3，其中就包含不少動畫示例，花了點時間學習和整理工具

今天分享使用html+css3實現skew傾斜、rotate旋轉動畫，咱們先看最終效果圖（我這裏爲了演示效果，就用QQ屏幕截成多張圖片，而後製做成gif動畫給你們簡單展現下，效果很差請你們多多包涵）學習

圖1測試

具體步驟以下：動畫

一、放置兩個div，一個做爲容器（圖1中綠色背景部分 id="warp"），另外一個做爲動畫元素（圖1中黃色背景部分 id="box"）spa

HTML代碼：ssr

<div id="warp">
    <div id="box">WEB</div>
</div>

CSS代碼（設置容器及動畫元素默認樣式）：翻譯

#warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto;
} #box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0;
                
}

注意：#box{position: relative;}是爲該元素接下來作動畫作準備，由於動畫過程當中須要改變其位置，故這裏使用相對定位

上述代碼爲基本的html css，你們應該沒問題吧

此時效果以下：

二、使用CSS3 @keyframes自定義動畫

CSS代碼：

@keyframes move { 0% { top: 280px; left: 0; transform: skewX(0deg); width: 40px; height: 40px;
    } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red;
    } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px;
    } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px;
    } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green;
    } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px;
    } 55% { top: 280px; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: blue;
    } 60% { transform: rotate(-90deg); transform-origin: left bottom;
    } 65% { transform: rotate(-180deg); transform-origin: left top;
    } }

代碼解析：

css3自定義動畫須要使用@keyframes規則，具體請看CSS3 @keyframes 規則
設置動畫執行進度

本示例中定義了 0% 20% 22% 30% 40% 50% 55% 60% 65%幾個動畫進度，

百分比到底表明什麼意思？

舉例說明：若是整個動畫執行10秒，那麼20%就表明當動畫執行到2秒時的效果。因此整個自定義動畫翻譯過來就是在每一個執行進度中定義css樣式（好比 width，height，color等），這樣就造成了連貫的動畫效果。執行進度百分比根據實際狀況可自行調整。

注意：該執行進度並不是必定要設置100%，如本示例中僅設置到65%，這就意味着剩下的35%就由css3自行完成動畫迴歸到原始狀態（你們能夠試試）
元素傾斜（元素變形）、旋轉（元素不變形）

本示例中用到傾斜及旋轉動畫，傾斜使用skew()，參數爲傾斜度數；旋轉使用rotate()，參數爲旋轉度數；

傾斜原理示意圖以下：

X軸逆時針轉爲正；Y軸順時針轉爲正；

舉例：

skew(30deg),在本示例中效果將成這樣

skew(-30deg),在本示例中效果將成這樣

Y軸的這裏就不舉例了，根據上述提示你們可自行測試效果

transform-origin，元素傾斜或轉動中心點，具體屬性值可看CSS3 transform-origin 屬性

這裏的中心點，指的是動畫元素的中心點，元素圍繞該點轉動或傾斜，該點座標是不會改變的；我的以爲這裏須要頭腦中產生一些幾何圖形以便於理解，或者用一張紙（手機之類的物品）放在桌子上，用手固定該物品的某個點演示一下轉動效果，就明白了

三、執行自定義動畫

CSS代碼：

#box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0; animation: move 5s infinite;
}

代碼解析：

animation: move 5s infinite;

表明該自定義動畫完成耗時5秒，而且無限循環執行

animation屬性的詳細說明請看這裏CSS3 animation（動畫）屬性

OK，上述步驟及原理你們都清楚了吧。本示例完整代碼以下，各位能夠直接複製去執行看看效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML5+CSS3 skew傾斜、rotate旋轉動畫</title>
        <style type="text/css"> #warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto;
            } #box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0; animation: move 5s infinite;
                
            } @keyframes move { 0% { top: 280px; left: 0; transform: skewX(0deg); width: 40px; height: 40px;
                } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red;
                } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px;
                } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px;
                } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green;
                } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px;
                } 55% { top: 280px; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: blue;
                } 60% { transform: rotate(-90deg); transform-origin: left bottom;
                } 65% { transform: rotate(-180deg); transform-origin: left top;
                } } </style>
    </head>

    <body>
        <div id="warp">
            <div id="box">WEB</div>
        </div>
    </body>

</html>

好了，今天分享就到這裏，之後還有更多喲，請你們一塊兒來交流下，有興趣的朋友給個人文章評論下嘛

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。