整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
憂慮像一把搖椅
它可以使你有事做
但不能使你前進一步
- 2024.04.10 -
在深入探討CSS變形動畫之前，讓我們先探討一下掌握它之后你可以實現哪些有趣的效果。
學習了CSS變形動畫之后，你將能夠為你的網頁添加引人注目的動態效果，例如創建一個立體的3D魔方，或者設計一個引人入勝的旋轉菜單。這些僅僅是眾多可能性中的一小部分，但或許可以勾起我們的學習興趣。
CSS變形動畫是利用CSS3的transform屬性創建的動畫效果。它可以使元素旋轉、縮放、傾斜甚至翻轉，讓靜態的網頁元素動起來，為用戶帶來更加豐富的交互體驗。
坐標系統
首先我們要學習的變形動畫，想達到在上圖中出現的3D效果單純的X與Y兩個軸是實現不了的，還需要加入一條縱深軸，即Y軸的參與才有一個3D的視覺感受。
那么如何來理解X,Y,Z這三條軸的關系呢？可以看一下下面這張圖。
X和Y軸都非常好理解，怎么理解這個Z軸呢？
CSS的中文名稱叫做層疊樣式表，那么它肯定是一層一層的。之前學習過z-index就是用來設置層的優先級，優先級越高越在上面，也可以理解為離我們肉眼越近，它把優先級低的層給蓋住了，所以Z軸可以理解為我們觀察的視角與被觀察物體之間的一條軸。
使用 transform 來控制元素變形操作，包括控制移動、旋轉、傾斜、3D轉換等。
下面我們通過一些例子來演示一下，比較常用的變形操作：
2.1 位移 translate()
translate()函數可以將元素向指定的方向移動，類似于position中的relative?；蛞院唵蔚睦斫鉃椋褂胻ranslate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
想象一下，當你滾動頁面時，一個元素平滑地從一個位置滑向另一個位置，這種流暢的過渡效果可以大大提升用戶體驗。
translate我們分為三種情況：
1）translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
2）translateX(x)僅水平方向移動（X軸移動）
3）translateY(Y)僅垂直方向移動（Y軸移動）
實例演示：通過translate()函數將元素向Y軸下方移動50px,X軸右方移動100px。
HTML代碼：
<div class="wrapper">
<div>我向右向下移動</div>
</div>CSS代碼：
.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}演示結果：
旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。旋轉不僅可以是固定的度數，還可以是動態變化的，創造出無限的可能性。
它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。如下圖所示：
HTML代碼：
<div class="wrapper">
<div></div>
</div>CSS代碼：
.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}演示結果：
扭曲skew()函數能夠讓元素傾斜顯示。這種效果常常用于模擬速度感或者傾斜的視覺效果。
它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。
Skew()具有三種情況：
1）skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。
2）skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
3）skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
示例演示：
通過skew（）函數將長方形變成平行四邊形。
HTML代碼：
<div class="wrapper">
<div>我變成平形四邊形</div>
</div>CSS代碼：
.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}演示結果：
縮放 scale()函數 讓元素根據中心原點對對象進行縮放。這不僅可以用來模擬放大鏡效果，還可以創造出元素的進入和退出動畫，比如一個圖片慢慢縮小直至消失。
縮放 scale 具有三種情況：
1） scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）。
例如：
div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform: scale(1.5,0.5);
}注意：Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。
2）scaleX(x)元素僅水平方向縮放（X軸縮放）
3）scaleY(y)元素僅垂直方向縮放（Y軸縮放）
HTML代碼：
<div class="wrapper">
<div>我將放大1.5倍</div>
</div>CSS代碼：
.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5);
}演示結果：
注意：scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大于或等于1.01的值，作用是讓元素放大。
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素。
此屬性值使用涉及到數學中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值，如果需要深入了解，需要對數學矩陣有一定的知識。
示例演示：通過matrix()函數來模擬transform中translate()位移的效果。
HTML代碼：
<div class="wrapper">
<div></div>
</div>CSS代碼：
.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform: matrix(1,0,0,1,50,50);
}演示結果：
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」
任何一個元素都有一個中心點，默認情況之下，其中心點是居于元素X軸和Y軸的50%處。如下圖所示：
在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。
但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。
transform-origin取值和元素設置背景中的background-position取值類似，如下表所示：
示例演示：
通過transform-origin改變元素原點到左上角，然后進行順時旋轉45度。
HTML代碼：
<div>
<div>原點在默認位置處</div>
</div>
<div class="wrapper transform-origin">
<div>原點重置到左上角</div>
</div>CSS代碼：
.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}演示結果：
以上就是css動畫中幾種基本的變形技巧了，掌握這些我們可以操控我們的網頁元素實現我們想要的一些基本動畫效果。
在這個充滿創造力的時代，CSS變形動畫是每個前端開發者必備的技能。它不僅能提升用戶體驗，更能激發設計師和開發者的創意火花。所以，不妨嘗試一下，讓你的網頁動起來，給用戶留下深刻的印象吧！
我們下期再見！
END
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
隨HTML5而來的CSS3讓前端小伙伴們可以用簡單的CSS樣式即可寫出動畫效果來，而在這之前，一提到動畫我們可能會想到JavaScript，Flash，等。如果是用JavaScript那倒也不是很糟糕的事啦，但如果寫出來的效果非要強迫客戶端安裝第三方插件才能顯示，畢竟不是很理想。這也就是為什么谷歌會不遺余力地推廣他所主導的開源項目WebRTC (Web Real-Time Communication)，把實時通訊的功能都做進瀏覽器，像視頻通話這樣的高級應用直接在JavaScript里調用幾個瀏覽器API即可實現!這在以前想都不敢想。
再加上HTML5將很多之前需要依賴外部程序或者需要程序員們寫大量JS來實現的東西標準化了，一個目的就是豐富Web設計，徹底丟棄第三方插件，讓瀏覽器干干凈凈。說了這么多，讓我開始談談CSS3的動畫。
定義動畫
在CSS3中定義動畫是件很方便的事情。原理有點像使用Adobe公司的Flash軟件來制作動畫。
比如定義好一個物體的開始位置及狀態，0秒的時候一個紅色50X50的矩形處于畫面中央，再將畫面定位于時間軸上3秒處，將矩形設為100X100黃色。再右鍵添加補間動畫。這樣一個簡單的動畫便完成了。像關于位移，顏色漸變，甚至旋轉，3D效果等的動畫，現在都可以用CSS來做了。
CSS中的@符號
首先我們來看一下CSS中的@符號。
當我首先看到這個東西的時候，完全搞不懂是什么意思。于是開始嘗試去一探究竟。
請考慮這樣一種情形，你想在Web頁面使用設計師使用的一種字體，因為設計是那幫不懂Coding的平面設計師搞出來的，老板看了覺得還不錯，剩下實現的問題就交給你了。因為這種字體不是很通用，所以用戶電腦上有很大可能是沒有裝這一字體的，那就意味首頁面在用戶電腦上的呈現會不一致，頁面找不到指定的字體會調用系統默認的字體。
比如下面我們在頁面使用Adelle_Reg.otf字體。
通過打開查看可以得到Font name，然后基本我們會通過一句簡單的CSS來搞定：
但由于我系統里并沒有'Adelle Rg' 這樣的字體，所以頁面會是這樣的
所以我們考慮把字體文件包含到CSS里去，換句話說把字體文件發送到客戶端。于是實現要改，這時使用@font-face 來指定字體文件的路徑，這個時候我們初次看到引入了一個@符號
所以改過之后的代碼如上圖。
· 先通過@font-face定義了一個取名叫'customFont'的font face，會在后面使用到
· 然后再通過給需要的頁面元素指定font-family 為剛才定義的customFont'
字體已經應用上且我們能夠在Resource里面發現字體文件已經發送到了客戶端瀏覽器。
從上面我們大致可以這樣理解此種情況下的@符號，雖然不太正確(比如@import, @media)，通過它定義了一個特殊場合下的變量，這里是定義字體，在動畫里是定義動畫關鍵幀，然后我們會在CSS代碼的其他地方使用這個定義好的變量。
關鍵幀
什么是關鍵幀。一如上面對Flash原理的描述一樣，我們知道動畫其實由許多靜態畫面組成，第一個這樣的靜態畫面可以表述為一幀。其中關鍵幀是在動畫過程中體現了物理明顯變化的那些幀。
比如之前的例子中，元素div由50X50紅色的大小變化到狀態100X100 黃色的過程中，這一頭一尾的兩個狀態起到了對動畫定義的關鍵作用。所以這兩個狀態就是整個動畫的關鍵幀。
@keyframes 定義動畫關鍵幀
通過之前的胡說現在我們看到@keyframes就不會覺得這個@符號有多別扭了。我們使用它來定義動畫的關鍵幀。
CSS代碼中定義關鍵幀重要的兩點是名稱和時間點。
其中狀態部分指定元素的樣式，因此可以是各種你想要的CSS代碼，顏色尺寸透明度旋轉等。'from'指定了動畫過程的開始狀態，'to'指定了動畫結束時元素的狀態。所以整個動畫也就是從from指定的開始狀態變化到to指定的狀態的過程。
假使我們已經創建好了一個HTML文檔，其結構很簡單只有一個用于呈現動畫的div。
所以對于上面的例子，動畫的定義大概是下面這個樣子的：
· 定義的動畫取名'example'
· 在'from'也就是動畫開始時指定元素長50px寬50px，背景色為紅色
· 在'to'也就是動畫結束時指定元素長100px寬100px，背景色為黃色
· 對于使用webkit內核的瀏覽器比如Chrome,Safari需要使用-webkit-前綴，所以需要寫兩套代碼，以保證在Chrome或Safari里能工作
當然對于狀態的定義不局限于開始和結束兩個時間點，我們可以指定一個動畫過程中任何時間點元素的狀態。下面是定義關鍵幀的另一種寫法。
上面定義了整個動畫過程中0%，50%，100%三個時間點元素的狀態。比如我們定義了一個時長為10秒的動畫，那么0%就是動畫開始時0秒的時候，0%后面的代碼指定元素在動畫開始時是怎樣的，然后50%也就是動畫進行到5秒的時候，元素又是什么樣子。最后100% 對于動畫進行到10秒也就是動畫結束時元素的狀態。
因此用這種寫法我們可以指定的元素狀態數量沒有限制，可以更精確地控制整個動畫。
CSS3 animation屬性
當我們使用@keyframes定義好了一個動畫，它并不會執行產生任何效果，直到我們通過animation屬性將動畫應用到相應元素上。
對于 CSS3 animation 屬性其完整的語法如下：
animation: name duration timing-function delay iteration-count direction;
· name是使用@keyframes定義好的關鍵幀名稱
· duration從字面意思可知是指定動畫持續時間
· timing-function 指定動畫以何種方式播放，具體指的是從元素的一個狀態過渡到另一個狀態所使用的方式，可用的值有linear，ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。每種方式的討論超出了原計劃，這里只是列出
· delay指定一個延時讓動畫不立即播放
· iteration-count 指定動畫重復次數，可以指定一個數字，也可以使用'infinite'表示一直播放
· direction指定動畫是否反向播放或者交替著播放，可用的值有normal, reverse, alternate, alternate-reverse
其中name和duration 是必需的，如果不指定duration默認為0，也就是動畫持續0秒，所以就無法看到動畫效果。
在前面已經定義好了關鍵幀了，現在我們使用animation將其應用到相應元素上。
現在打開頁面就會看到最上面那個動畫效果了。
使用百分比指定關鍵幀的版本
上面介紹過通過百分比的形象我們可以指定動畫過程中任何時間點時元素的狀態，將上面的版本變為百分比版本是非常容易的事情。
我們只需把關鍵幀的定義由from to 改為想要的時間百分比即可。
比如開始的狀態不改變，增加一個動畫進行到50%時顏色為黃色大小為75X75，最后為綠色大小為100X100。
往復的動畫
如果我們指定了direction為alternate的話，當動畫播放到結尾時，它會以相反的方向回到動畫開始的狀態，然后一直這樣交替播放。
有了上面的基本了解，我們可以寫一些簡單的動畫了。但真正驚贊的CSS3動畫是需要花一些功夫的，這里就不繼續了。各位小伙伴們，你們是否看懂了呢?
ranslate移動變形
translate()移動畫布, rotate()旋轉畫布。
canvas中不能只移動某一個對象, 移動的都是整個畫布。
canvas中不能只旋轉某一個對象, 旋轉的都是整個畫布。
但是可以用save()、restore()來巧妙設置, 實現讓某一個元素進行移動和旋轉。
移動變形、移動的是整個畫布、而不是某個元素, 在ctx.translate()之后繪制的語句都將被影響。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
ctx.translate(100, 100); //將畫布坐標系移動，坐標系就發生變化了
ctx.fillRect(0, 0, 100, 100); //相對于移動后的坐標系開始畫畫
</script>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
ctx.translate(100, 100); //將畫布坐標系移動，坐標系就發生變化了
ctx.fillRect(0, 0, 100, 100); //相對于移動后的坐標系開始畫畫
ctx.beginPath();
ctx.arc(100, 100, 100,0 , 6.28, false);
ctx.fillStyle ="skyblue";
ctx.fill();
</script>
</html>save()保存和restore()恢復
ctx.save()表示保存上下文的物理性質, ctx.restore()表示恢復最近一次的保存。
save表示保存sava函數之前的狀態, restore表示獲取save保存的狀態。
移動了的元素, 會影響不需要移動圓點坐標的元素, 所以可以使用以上兩個方法保存起來, 可以解決讓某一個元素移動變形不受影響。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
ctx.save();
ctx.translate(100, 100); //將畫布坐標系移動，坐標系就發生變化了
ctx.fillRect(0, 0, 100, 100); //相對于移動后的坐標系開始畫畫
ctx.restore()
ctx.beginPath();
ctx.arc(100, 100, 100, 0 , 6.28, false);
ctx.fillStyle ="skyblue";
ctx.fill();
</script>
</html>rotate()旋轉變形
旋轉的是整個坐標系, 坐標系以0,0點為中心點進行旋轉。
rotate(1)的參數, 是弧度, 旋轉的也不是矩形, 而是畫布。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
canvas{
border: 1px solid #000;
background:url(images/bg.png);
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
ctx.save();
ctx.translate(150,150)
ctx.rotate(1); //1表示57.3度（1弧度）
ctx.fillRect(-50, -50, 100, 100); //相對于移動后的坐標系開始旋轉
ctx.restore()
</script>
</html>旋轉動畫
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
