CSS3動(dòng)畫和HTML5新特性的示例分析
本文將為大家詳細(xì)介紹“CSS3動(dòng)畫和HTML5新特性的示例分析”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識點(diǎn)，希望這篇“CSS3動(dòng)畫和HTML5新特性的示例分析”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。
創(chuàng)新互聯(lián)公司是一家專業(yè)提供南票企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、H5建站、小程序制作等業(yè)務(wù)。10年已為南票眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
一、css3動(dòng)畫
?css3動(dòng)畫相對于通過JavaScript動(dòng)態(tài)改變元素樣式性能更好，更加容易。CSS3中有三個(gè)關(guān)于動(dòng)畫的屬性：transform、transition和animation。
1、transformtransform主要用來改變元素形狀：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)
通過指定的角度對元素進(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)?？s放比例如果大于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有三種寫法：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、transitiontransition是用來設(shè)置元素是如何從一種狀態(tài)平滑到另外一種狀態(tài)：
transition-property（變換的屬性）transition-duration（變換延續(xù)的時(shí)間）transition-timing-function（變換的速率）transition-delay（變換的延遲）
3、animationanimation比較類似于flash中的逐幀動(dòng)畫，就像電影的播放一樣，表現(xiàn)非常細(xì)膩并且有非常大的靈活性。而transition只指定了開始和結(jié)束狀態(tài)。逐幀動(dòng)畫由關(guān)鍵幀組成，很多個(gè)關(guān)鍵幀的連續(xù)播放就組成了動(dòng)畫，在CSS3中是由屬性keyframes來完成逐幀動(dòng)畫的。
@keyframes
animationName：動(dòng)畫名稱（自己命名）
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新特性
用于繪畫 canvas 元素。
用于媒介回放的 video 和 audio 元素。
本地離線存儲至localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
（
新標(biāo)簽）語意化更好的內(nèi)容元素
表單控件：calendar、date、time、email、url、search。
（選擇器）
如果你能讀到這里，小編希望你對“CSS3動(dòng)畫和HTML5新特性的示例分析”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享標(biāo)題：CSS3動(dòng)畫和HTML5新特性的示例分析
瀏覽路徑：http://www.jiaotiyi.com/article/jpepsi.html