04css3第二天-課件基礎(chǔ)二

新·模式同時(shí)采用最合理的TS教學(xué)模式和最合理教學(xué)時(shí)間安排.全程手把學(xué)、邊學(xué)邊練，

7*12小時(shí)答疑指導(dǎo)，保證學(xué)員即學(xué)即會(huì)。薪·未來(lái)無(wú)限互聯(lián)學(xué)生畢業(yè)平均薪資12755元，比

業(yè)機(jī)構(gòu)平均高出12%。98%的無(wú)限互聯(lián)學(xué)生在畢業(yè)4周內(nèi)成功就業(yè)！信·機(jī)構(gòu)慧科教育

旗下泛IT職業(yè)教育培訓(xùn)機(jī)構(gòu)。與找座兒形成國(guó)內(nèi)第一家O2O混合式教學(xué)

。良心教學(xué)，

賴大機(jī)構(gòu)！心·服務(wù)多年教學(xué)經(jīng)驗(yàn)資深講師傾心教學(xué)配備專門(mén)的生活導(dǎo)師，提供入學(xué)接送、精選宿舍、生活指導(dǎo)、學(xué)習(xí)督促等一條龍服務(wù)。提供專業(yè)就業(yè)指導(dǎo)服務(wù)，簡(jiǎn)歷指導(dǎo)+模擬面試，保證快速就業(yè)。走進(jìn)無(wú)限互聯(lián)本章知識(shí)點(diǎn)transition過(guò)渡與2D轉(zhuǎn)換CSS3動(dòng)畫(huà)屬性，函數(shù)及使用3D

轉(zhuǎn)換

與視點(diǎn)的概念，屬性、函數(shù)的使用一、transition過(guò)渡與2D轉(zhuǎn)換transition參數(shù)transition過(guò)渡完成事件2D轉(zhuǎn)換參數(shù)及使用transition過(guò)渡過(guò)渡指一個(gè)元素在不同的狀態(tài)之間進(jìn)行平滑的轉(zhuǎn)換CSS3中使用transition屬性實(shí)現(xiàn)過(guò)渡效果transition過(guò)渡transition屬性的參數(shù)（均為可選）transition-property要運(yùn)動(dòng)的樣式:none(無(wú))/all(所有)/某一屬性transition-duration運(yùn)動(dòng)時(shí)間：0s（默認(rèn)）transition-delay延遲時(shí)間：0s（默認(rèn)）transition-timing-function

運(yùn)動(dòng)形式ease

（逐漸變慢）默認(rèn)均速加速linearease-inease-outease-in-out

先加速后cubic-bezier

曲線transition過(guò)渡cubic-bezier曲線https

/ceaser該可以生成曲線坐標(biāo)transition過(guò)渡transition過(guò)渡完成事件：Webkit內(nèi)核：

obj.addEventListener(“webkitTransitionEnd”,function(){},false)firefox：obj.addEventListener(“transitionend”,function(){},false)2D轉(zhuǎn)換轉(zhuǎn)換的概念：就是使用transform屬性將HTML元素進(jìn)行移動(dòng)translate旋轉(zhuǎn)rotate縮放scale傾斜skew轉(zhuǎn)換方式：2D轉(zhuǎn)換：在二3D轉(zhuǎn)換：在三內(nèi)轉(zhuǎn)換內(nèi)轉(zhuǎn)換2D轉(zhuǎn)換-translate用法：transform：translate（x軸移動(dòng)距離(長(zhǎng)度值/%),y軸移動(dòng)距離(長(zhǎng)度值/%)）2D轉(zhuǎn)換-rotate用法：transform：rotate（45deg(角度)）正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)2D轉(zhuǎn)換-scale用法：transform：scale（x(寬放大倍數(shù))，y(高放大倍數(shù)，可選，默認(rèn)值同第一個(gè)參數(shù))）2D轉(zhuǎn)換-skew用法：transform：skew（沿x軸傾斜的角度，沿y軸傾斜的角度（可選，默認(rèn)為0度））2D轉(zhuǎn)換-matrixmatrix矩陣：transform：skew（a,b,c,d,e,f）對(duì)應(yīng)矩陣變換公式2D轉(zhuǎn)換-matrixmatrix矩陣使用：去吧,

水偏移：transform:matrix(與我無(wú)關(guān),哪位,怎么不去高考,打平偏移距離,垂直偏移距離);2D轉(zhuǎn)換-matrixmatrix矩陣使用：縮放：matrix(1,

0,

0,1,

30,

30);第一個(gè)1縮放x軸，第二個(gè)1縮放y軸，假設(shè)比例為s，matrix（s，0，0，s，0，0）x

=

ax

+

cy

+

e

=

s*x

+

0*y

+

0

=

sxy

=

bx

+

dy

+

f

=

0*x

+

s*y

+

0

=

sy也就是matrix（sx，0，0，sy，0，0）等同于scale（sx，sy）2D轉(zhuǎn)換-matrixmatrix矩陣使用：旋轉(zhuǎn)練二、CSS3動(dòng)畫(huà)CSS3動(dòng)畫(huà)概念動(dòng)畫(huà)關(guān)鍵幀動(dòng)畫(huà)必需、可選屬性CSS3動(dòng)畫(huà)動(dòng)畫(huà)分為兩種：逐幀動(dòng)畫(huà)：組成動(dòng)畫(huà)的每一個(gè)畫(huà)面就是一個(gè)幀關(guān)鍵幀動(dòng)畫(huà)：找到關(guān)鍵畫(huà)面，并確定為關(guān)鍵幀，電腦會(huì)自動(dòng)生成中間的過(guò)渡幀（CSS3動(dòng)畫(huà)就是關(guān)鍵幀動(dòng)畫(huà)）CSS3動(dòng)畫(huà)在CSS3中創(chuàng)建動(dòng)畫(huà)需要用到兩個(gè)CSS特性（IE10以下不支持）標(biāo)準(zhǔn)：@keyframes

規(guī)則animation 屬性webkit內(nèi)核：@-webkit-keyframes

規(guī)則@-webkit-animation

屬性動(dòng)畫(huà)制作步驟：先使用@keyframes創(chuàng)建出關(guān)鍵幀再使用animation屬性讓動(dòng)畫(huà)動(dòng)起來(lái)CSS3動(dòng)畫(huà)關(guān)鍵幀—keyframes類似于flash，只需指明兩個(gè)狀態(tài)，之間的過(guò)程由計(jì)算機(jī)自動(dòng)計(jì)算關(guān)鍵幀時(shí)間單位：數(shù)字：0%、25%，100%字符：from（0%），to（100%）CSS3動(dòng)畫(huà)調(diào)用動(dòng)畫(huà)—animation必要屬性：animation-nameanimation-duration動(dòng)畫(huà)名稱（關(guān)鍵幀名稱）動(dòng)畫(huà)持續(xù)時(shí)間CSS3動(dòng)畫(huà)調(diào)用動(dòng)畫(huà)—animation可選屬性：animation-timing-function運(yùn)動(dòng)形式linear

勻速ease

緩沖ease-in

由慢到快ease-out

由快到慢ease-in-out由慢到快再到慢cubic-bezier(p1x,p1y,p2x,p2y)

曲線animation-delay 動(dòng)畫(huà)延遲（只是第一次）animation-iteration-count

重復(fù)次數(shù)正整數(shù) 默認(rèn)是1infinite

無(wú)限次CSS3動(dòng)畫(huà)調(diào)用動(dòng)畫(huà)—animation可選屬性：animation-direction

動(dòng)畫(huà)

的方向normalreversealternate默認(rèn)值，正向動(dòng)畫(huà)反向第一次正向，第二次反向alternate-reverse

第一次方向animation-fill-mode

動(dòng)畫(huà)，第二次正向前后狀態(tài)none

默認(rèn)值backwards

設(shè)置forwards

設(shè)置both之前的元素狀態(tài)和第一幀相同之后的元素狀態(tài)和最后一個(gè)關(guān)鍵幀相同backwards和forward的結(jié)合animation-play-state

控制動(dòng)畫(huà)

或暫停runningpaused默認(rèn)值暫停練習(xí)二1、讓籃球旋轉(zhuǎn)2、當(dāng)鼠標(biāo)移動(dòng)到籃球上停止旋轉(zhuǎn)，移開(kāi)繼續(xù)旋轉(zhuǎn)三、3D轉(zhuǎn)換CSS3

3D轉(zhuǎn)換的概念與視點(diǎn)的概念3D轉(zhuǎn)換屬性3D轉(zhuǎn)換函數(shù)3D轉(zhuǎn)換3D的概念：在過(guò)去相當(dāng)長(zhǎng)的一段時(shí)間內(nèi)，3D技術(shù)一直被應(yīng)用在桌面型應(yīng)用程序內(nèi)最近，隨著顯卡硬件加速（即GPU加速）技術(shù)的應(yīng)用，3D技術(shù)也開(kāi)始逐漸被應(yīng)用在Web應(yīng)用程序中2009年3月，CSS

3D

Transform模型正式推出，它允許Web應(yīng)用程投影變形特性來(lái)投影、選擇及序的開(kāi)發(fā)者通過(guò)對(duì)頁(yè)面上任何可視元素應(yīng)用3D實(shí)現(xiàn)一個(gè)高級(jí)、令人驚嘆的用戶界面3D是對(duì)2D的一個(gè)擴(kuò)展，增加了在3D空間中實(shí)現(xiàn)變形特性3D轉(zhuǎn)換3D轉(zhuǎn)換的概念：指HTML元素在3內(nèi)進(jìn)行移動(dòng)，旋轉(zhuǎn)，縮放，傾斜等操作3D轉(zhuǎn)換的概念：下面是兩個(gè)矩形，一個(gè)原始的狀態(tài)，一個(gè)是沿三維坐標(biāo)的x軸旋轉(zhuǎn)90度后的狀態(tài)發(fā)現(xiàn)旋轉(zhuǎn)后離比較遠(yuǎn)的一條邊會(huì)比較短，近的一邊會(huì)比較長(zhǎng)，這就是三中“近大遠(yuǎn)小”

的

效果原始旋轉(zhuǎn)后3D轉(zhuǎn)換視點(diǎn)的概念：視點(diǎn)就是人的眼睛看物體的那個(gè)位置，和物體的相對(duì)位置不同，例如距離的遠(yuǎn)近，位置的高低，或者左右的偏移所看到的物體的效果也不同3D轉(zhuǎn)換3D轉(zhuǎn)換屬性：transform-style（preserve-3d）建立3D空間flat

默認(rèn)，2D環(huán)境，子元素將不保留其3D位置preserver-3d

3D環(huán)境，子元素將保留其3D位置3D視距（景深）3D轉(zhuǎn)換效果，因?yàn)槟J(rèn)的視點(diǎn)在窗口的中3D轉(zhuǎn)換屬性：縮放窗口發(fā)現(xiàn)不同的大小會(huì)有不同的心點(diǎn)-origin

設(shè)置視點(diǎn)位置3D轉(zhuǎn)換轉(zhuǎn)換函數(shù)：origin轉(zhuǎn)換基準(zhǔn)點(diǎn)transform-origin：x

y

z3D轉(zhuǎn)換轉(zhuǎn)換函數(shù)：rotate旋轉(zhuǎn)rotateX（角度）rotateY（角度）rotateZ（角度）rotate3D(x,y,z,角度)xyz3D轉(zhuǎn)換轉(zhuǎn)換函數(shù)：translate移動(dòng)translateX（lenght）translateY（lenght）translateZ（lenght）translate3D(lenght,lenght,lenght)

x，y，z軸的移動(dòng)長(zhǎng)度，不移動(dòng)則為0，前兩個(gè)值可以為百分比，最后一個(gè)必須為長(zhǎng)度轉(zhuǎn)換函數(shù)：scale縮放scaleX（number）scaleY（number）scaleZ（number）scale3D（number，number，number）

x，y，z軸縮放倍數(shù)，不縮放為13D轉(zhuǎn)換轉(zhuǎn)換函數(shù)：matrix3D（）（選講）matrix3D（1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1）課后作業(yè)1