CSS3動(dòng)畫(huà)和HTML5新特性詳解

發(fā)布時(shí)間：2020-08-31 16:01:02 作者：L289121

這篇文章主要介紹了CSS3動(dòng)畫(huà)和HTML5新特性詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、css3動(dòng)畫(huà)

☺css3動(dòng)畫(huà)相對(duì)于通過(guò)JavaScript動(dòng)態(tài)改變?cè)貥邮叫阅芨?，更加容易。CSS3中有三個(gè)關(guān)于動(dòng)畫(huà)的屬性：transform、transition和animation。
1、transform
transform主要用來(lái)改變?cè)匦螤睿?code>rotate（旋轉(zhuǎn)）、scale（縮放）、skew（扭曲）、translate（移動(dòng)）和matrix（矩陣變形）。
例：

.transform-class {
    transform ： rotate(30deg) scale(2,3);
}

1.1、transform-origin基點(diǎn)
所有變形都基于基點(diǎn)，基點(diǎn)默認(rèn)為元素的中心點(diǎn)。用法：transform-origin:(x,y)，X、Y可以是百分比、px、rem，也可以是left、right、center（X）和top、center、bottom（Y）。
例：

.transform-class {
    transform-origin: (left, bottom);
}

1.2、rotate旋轉(zhuǎn)
通過(guò)指定的角度對(duì)元素進(jìn)行旋轉(zhuǎn)變形，若正數(shù)則為順時(shí)針旋轉(zhuǎn)，若負(fù)數(shù)則為逆時(shí)針旋轉(zhuǎn)。
例：

.transform-rotate {
    transform: rotate(30deg);
}

1.3、scale縮放
scale有三種用法：scale(x,y)、scaleX(x)、scale(Y)。縮放比例如果大于1則放大，等于1 為原始大小，小于1則縮小。
例：

.transform-scale {
    transform: scale(2,1.5);
}

.transform-scaleX {
    transform: scaleX(2);
}

.transform-scaleY {
    transform: scaleY(1.5);
}

1.4、translate移動(dòng)
translate有三種情況：translate(x,y)、translateX(x)、translateY(y)。
例：

.transform-translate {
    transform: translate(400px, 20px);
}

.transform-translateX {
    transform: translateX(300px);
}

.transform-translateY {
    transform: translateY(20px);
}

1.5、skew扭曲
skew有三種寫(xiě)法：skew(xdeg,ydeg)、skewX(xdeg)、skewY(ydeg)，單位deg為角度。
例：

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}

1.6、matrix
略matrix詳述
2、transition
transition是用來(lái)設(shè)置元素是如何從一種狀態(tài)平滑到另外一種狀態(tài)：

transition-property（變換的屬性）
transition-duration（變換延續(xù)的時(shí)間）
transition-timing-function（變換的速率）
transition-delay（變換的延遲）

3、animation
animation比較類似于flash中的逐幀動(dòng)畫(huà)，就像電影的播放一樣，表現(xiàn)非常細(xì)膩并且有非常大的靈活性。而transition只指定了開(kāi)始和結(jié)束狀態(tài)。逐幀動(dòng)畫(huà)由關(guān)鍵幀組成，很多個(gè)關(guān)鍵幀的連續(xù)播放就組成了動(dòng)畫(huà)，在CSS3中是由屬性keyframes來(lái)完成逐幀動(dòng)畫(huà)的。
@keyframes

animationName：動(dòng)畫(huà)名稱（自己命名）
percentage：百分比值 [pəˈsentɪdʒ]
properties：樣式屬性名稱（color、left等）

例：

@keyframes animationName {
   from {
       properties: value;
   }
   percentage {
       properties: value;
   }
   to {
       properties: value;
   }
}
//or
@keyframes animationName {
   0% {
       properties: value;
   }
   percentage {
       properties: value;
   }
   100% {
       properties: value;
   }
}

二、H5新特性

用于繪畫(huà) canvas 元素。
用于媒介回放的 video 和 audio 元素。
本地離線存儲(chǔ)至localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
（新標(biāo)簽）語(yǔ)意化更好的內(nèi)容元素

在這里插入圖片描述