目錄
編寫頁面
transition元素過渡屬性
貝塞爾曲線
transform元素變換
- translate平移
- scale縮放
- rotate旋轉
- skew傾斜
- matrix矩陣變換
- perspective景深
- transform-origin變換原點
animation 和 keyframs（更精細的動畫）
編寫頁面
記事本或SublimeText或vscode編寫html:
<html>
<div id="box"></div>
<style>
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*寬度*/
height: 100px; /*長度*/
position: relative; /*位置*/
border-radius: 15px; /*加點圓角*/
}
</style>
</html>
加上鼠標懸浮的效果:
<html>
<div id="box"></div>
<style>
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*寬度*/
height: 100px; /*長度*/
position: relative; /*位置*/
border-radius: 15px; /*加點圓角*/
}
/*鼠標懸浮后的樣式*/
#box:hover {
/*向下偏移50px*/
top: 50px;
}
</style>
</html>
效果圖如下:
瀏覽器只渲染出“box”的初始狀態, 和鼠標懸浮后的狀態”top： 50px;”, 效果較為生硬，可以使用”transition”屬性豐富視覺效果。
transition元素過渡屬性
transition譯作“過渡”，在css3中，transition屬性用來設置元素過渡效果。
transition包含4個子屬性，分別為:
| 屬性 | 說明 | 默認值 |
|---|---|---|
| property | 設置給元素的那個方面添加過渡效果，比如元素的”width”和”height”均發生改變時，可以指定該屬性為”width“,那麼元素的”width”的變動才有過渡效果。”all“表示所有變動都加上過渡效果。 | all |
| duration | 設置過渡效果的持續時間，至少要給transition設置這個子屬性，否則transition屬性就沒意義了。 | 0s |
| timing-function | 過渡函數，該屬性決定元素的過渡效果與時間的關係。 | ease |
| delay | delay即為“延遲”，表示該元素在加載后多久才開始過渡效果 | 0s |
這幾個元素的順序如下:
transition: property duration timing-function delay;
修改上面的“#box”樣式:
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*寬度*/
height: 100px; /*長度*/
position: relative; /*位置*/
border-radius: 15px; /*加點圓角*/
/*設置過渡效果 持續1秒，延遲500毫秒才開始*/
transition: 1s 500ms; /*等價於 transition: all 1s ease 500ms */
/*兼容webkit內核*/
-webkit-transition: 1s 500ms;
}
transition屬性加在”#box”元素上，表示該元素變換時按設置的效果進行變換。
修改文件后可以發現過渡效果並沒有生效，這是因為”#box”沒有設置”top”，只是在鼠標懸浮后才出現”top”屬性，即解析器沒有找到“top”過渡的“初始狀態”，“過渡”就應該包含元素的初始狀態和最終狀態。
給”#box”加上”top: 0;”:
#box {
background-color: rgb(246, 96, 78); /*背景色*/
top: 0;
width: 100px; /*寬度*/
height: 100px; /*長度*/
position: relative; /*位置*/
border-radius: 15px; /*加點圓角*/
/*設置過渡效果 持續1秒，延遲500毫秒才開始*/
transition: 1s 500ms; /*等價於 transition: all 1s ease 500ms */
/*兼容webkit內核*/
-webkit-transition: 1s 500ms;
}
效果如下:
關於timing-function，還可以選擇”linear”(線性效果)、”ease-in”(漸進)等，想實現更好玩的效果，可以藉助“貝塞爾曲線函數”。
關於transition屬性——菜鳥教程傳送門
貝塞爾曲線
貝塞爾曲線百度百科
關於貝塞爾曲線，有很多資料，不再贅述。
貝塞爾曲線可視化
這是一個貝塞爾曲線函數可視化的一個網站，用這個網站可以直觀地生成合適的動畫加速度函數。
如上是網站的界面，函數的參數分別為坐標繫上紅球的x軸坐標、y軸坐標和藍綠球的x軸坐標和y軸坐標。坐標系橫軸為時間，縱軸為動畫的 progress, 直譯過來是進程、進展的意思，映射到平移上就是指移動的點到原點的偏移量。曲線的斜率，反映的是動畫的加速度。
動圖中兩個方塊是自定義動畫與線性動畫的對比。自定義動畫後面具有彈跳的效果，在左上角坐標繫上表現為後段往下的凹陷。動畫的整體效果是元素離原點的距離越來越遠，到後段反而離近一點點，然後又遠離，直至到達終點。
選擇合適的函數“cubic-bezier(.37,1.44,.57,.77)”設置到”#box”元素中:
#box {
background-color: rgb(246, 96, 78); /*背景色*/
top: 0;
width: 100px; /*寬度*/
height: 100px; /*長度*/
position: relative; /*位置*/
border-radius: 15px; /*加點圓角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
/*兼容webkit內核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}
效果如圖:
transform元素變換
以上提及的動畫效果都是給元素設置初始狀態和最終狀態，然後讓瀏覽器自動渲染的，這種叫“補間動畫”，即定義初始和結束狀態，瀏覽器自動計算並補充“中間的狀態”最後渲染出來，“補間動畫”在flash，AE之類的軟件都可以看到。
上面例子是已經知道了”box”的初始狀態”top: 0;”了，那萬一有的需求是一開始不知道“box”的位置呢，那該如何使得”box”向下移動？那就是”transform”屬性的功勞了。
”transform”就是“改變形態”的意思，就是“汽車人變形”里的“變形”，通過“transform”屬性可以改變元素的狀態。
transform包含很多的變換效果，一一介紹。
translate平移
translate是“轉變，轉為”的意思，在css3中，translate是transform的子屬性，用來平移元素。
translate包含如下幾種使用方法：
| 名稱 | 描述 | 示例 |
|---|---|---|
| translateX(x) | 表示水平移動，x為負是往左，為正則向右移動 | transform: translateX(10px) transform: translateX(-15%) |
| translateY(y) | 豎直移動，y為負向上，為正向下 | 同上 |
| translateZ(z) | 需配合“perspective()”使用，perspective()用來定義“景深”。z為負時是遠離用戶(屏幕)，正是接近用戶 | transform: perspective(500px) translateZ(200px) |
| translate(x, y) | 二維平面的移動，是最前面兩個的結合 | 簡單 |
| translate(x, y, z) | 三維空間的移動，最前面三個的結合 | 同上 |
把上面的html改成如下，效果一樣：
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*寬度*/
height: 100px; /*長度*/
position: relative; /*位置*/
border-radius: 15px; /*加點圓角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
/*兼容webkit內核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}
/*鼠標懸浮后的樣式*/
#box:hover {
/*向下偏移50px*/
transform: translateY(50px);
/*兼容webkit*/
-webkit-transform: translateY(50px);
}
scale縮放
scale就是縮放的意思，對元素進行縮放變換。包含:
- scaleX(x)
- scaleY(y)
- scaleZ(z)
- scale(x, y)
- scale3d(x, y, z)
用法與translate一致，只是參數是表示縮放的倍數，“1”表示原來的一倍（不放大不縮小），“0.5”縮小到原來一半，“2”變為原來兩倍。
transform: scale(.5);
rotate旋轉
旋轉變換，包含:
- rotate(angle): 最簡單的旋轉變換，angle為負逆時針，為正是順時針
- rotateX(angle): 繞着X軸旋轉
- rotateY(angle): 繞Y軸旋轉
- rotaleZ(angle): 繞Z軸旋轉
- rotate3d(x,y,z,angle): 這個複雜一點，是在空間直角坐標系(x,y,z)中選擇一個點，然後該點與原點（0,0,0）連成一條線，然後元素繞該線旋轉。
- rotate3d(1,0,0,180deg)等價於rotateX(180deg)
- rotate3d(0,1,0,180deg)等價於rotateY(180deg)
- rotate3d(0,0,1,180deg)等價於rotateZ(180deg)
transform: rotate(180deg);
skew傾斜
傾斜變換，包含:
- skewX(angle): 相對X軸傾斜,X軸方向上不變，Y軸旋轉angle度。
- skewY(angle): 相對Y軸傾斜，同上。
- skew(x-angle, y-angle): 結合起來。
skew不太好理解，結合例子來看：
一、
transform: skewX(45deg);
可以看到“測試字樣”在X軸上沒有變化，向著Y軸方向旋轉45度。
二、
transform: skewY(45deg);
在Y軸方向上沒變，”box”的豎邊仍與Y軸平行，橫邊則向著X軸方向旋轉45度。
三、
transform: skew(45deg,45deg);
skew不好理解，這裏貼出兩篇文章：
- css3 2d skew()方法用法理解
- css3中的skew(skewX,skewY)用法
matrix矩陣變換
矩陣變換，包含:
- matrix(n,n,n,n,n,n)
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
其它的變換都可以由矩陣變換獲得，這是線性代數的知識，學的都還給老師了…….
對CSS3中的transform：Matrix（）矩陣的一些理解
perspective景深
用於定義景深，與上面提到的3d變換配合使用，景深就是元素離眼睛（屏幕）的距離，在電腦上，圖形通過變換來讓我們眼睛看到的圖形產生距離感，大概就是近大遠小之類的。
transform: perspective(500px) rotate3d(1, 0, 0, 45deg);
transform-origin
transfor-origin屬性用來設置元素變換的基點。默認的，rotate繞元素中點旋轉，如果想讓元素繞左上角旋轉，可以把transform-origin設置為：
transform-orgin: 0% 0%;
示例：
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*寬度*/
height: 100px; /*長度*/
position: relative; /*位置*/
border-radius: 15px; /*加點圓角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; /*過渡效果*/
transform-origin: 0% 0%;/*設置動畫的基點*/
/*兼容webkit內核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
-webkit-transform-origin: 0% 0%;
}
/*鼠標懸浮后的樣式*/
#box:hover {
transform: rotate(45deg);
/*兼容webkit*/
-webkit-transform: rotate(45deg);
}
注意，”transform-origin”屬性是放在”#box”上而不是”#box:hover”
animation和keyframes（更精細的動畫）
上面提到的動畫均為補間動畫，自定義初始和結束的狀態，由瀏覽器計算渲染中間狀態。這些初始和結束的關鍵狀態，可以稱為“關鍵幀”，即“keyframes”。如果我們想實現更為精細的動畫效果，想在元素變換的“過程中”也加上特定的“狀態”，即插入“關鍵幀”，可以通過 “keyframes” 和 “animation” 屬性實現。
animation包含8個子屬性:
| 名稱 | 描述 |
|---|---|
| name | keyframe的名稱 |
| duration | 持續時間 |
| timing-function | 速度曲線 |
| delay | 延遲多久才開始 |
| iteration-count | 播放的次數,一整個動畫流程為一次 |
| direction | 是否在播放完后再反向播放 |
| fill-mode | 動畫不播放時的樣式 |
| play-state | 動畫的狀態，正在運行還是暫停 |
keyframe的定義如下:
@keyframes name{
percentage1 {state1}
percentage2 {state2}
}
/*兼容webkit*/
@-webkit-keyframes name{
percentage1 {state1}
percentage2 {state2}
}
name 是關鍵幀的名稱
percentage 是動畫周期的時刻百分比，即整個動畫周期的第百分之幾的時刻，50%表示播放到一半，30%表示動畫播放到百分之30.
state 是該時刻的元素狀態，如“top: 10px”，此刻元素距離上方的距離。
修改html文件:
<html>
<div id="box" style="line-height: 100px; text-align: center;">測試</div>
<style>
/*關鍵幀*/
@keyframes test{
0%,20%,50%,80%,100%{transform: translateX(0)}
40%{transform: translateX(30px)}
60%{transform: translateX(15px)}
}
/*兼容*/
@-webkit-keyframes test{
0%,20%,50%,80%,100%{-webkit-transform: translateX(0)}
40%{-webkit-transform: translateX(30px)}
60%{-webkit-transform: translateX(15px)}
}
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*寬度*/
height: 100px; /*長度*/
position: relative; /*位置*/
border-radius: 15px; /*加點圓角*/
transition: 1s linear 500ms; /*過渡效果*/
-webkit-transition: 1s linear 500ms; /*過渡效果，兼容webkit內核*/
}
/*鼠標懸浮后的樣式*/
#box:hover {
animation:test 1s 0s ease both; /*綁定關鍵幀*/
-webkit-animation: test 1s 0s ease both; /*兼容*/
}
</style>
</html>
效果：
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線
※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整
※南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!
※教你寫出一流的銷售文案?
※超省錢租車方案
※回頭車貨運收費標準
