HTML5+CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目7 動(dòng)畫頁面制作

《HTML5+CSS3Web前端開發(fā)項(xiàng)目化教程》

項(xiàng)目7動(dòng)畫頁面制作任務(wù)7.3制作“科普世界”模塊03目錄Contents任務(wù)7.2制作“漫游科技館”模塊02任務(wù)7.1制作“中國夢”主頁頭部輪播動(dòng)畫模塊01任務(wù)7.4制作頁腳模塊04教學(xué)目標(biāo)掌握transition過渡屬性掌握transform變形屬性掌握animation動(dòng)畫屬性熟悉iconfont圖標(biāo)庫的使用方法1.知識目標(biāo)能夠?yàn)樵卦O(shè)置過渡效果

能夠?yàn)樵卦O(shè)置變形效果

能夠創(chuàng)建并使用動(dòng)畫

能夠在頁面中使用iconfont圖標(biāo)2.技能目標(biāo)樹立科技強(qiáng)國意識

培養(yǎng)精益求精、力求創(chuàng)新的精神

遵守代碼規(guī)范性要求，養(yǎng)成良好的代碼編寫習(xí)慣3.素養(yǎng)目標(biāo)1任務(wù)7.1制作“中國夢”主頁頭部輪播動(dòng)畫模塊效果展示animation-duration：動(dòng)畫完成時(shí)間2animation-timing-function：速度曲線3animation-name：動(dòng)畫名稱1animation-iteration-count：動(dòng)畫播放次數(shù)5animation-direction：動(dòng)畫方向6animation-delay：延遲時(shí)間4animation：綜合設(shè)置動(dòng)畫7知識儲(chǔ)備-animation屬性@keyframesanimationname{keyframes-selector{css-styles;}}

當(dāng)前動(dòng)畫的名稱

關(guān)鍵幀選擇器，指定當(dāng)前關(guān)鍵幀要應(yīng)用到整個(gè)動(dòng)畫過程中的位置，百分比，from或to

定義執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對應(yīng)的動(dòng)畫狀態(tài)，CSS樣式屬性定義知識儲(chǔ)備-animation屬性1.@keyframes創(chuàng)建動(dòng)畫@keyframes規(guī)則用于創(chuàng)建動(dòng)畫，animation屬性只有配合@keyframes規(guī)則才能實(shí)現(xiàn)動(dòng)畫效果。@keyframes規(guī)則

當(dāng)前動(dòng)畫的名稱定義執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對應(yīng)的動(dòng)畫狀態(tài)

關(guān)鍵幀選擇器知識儲(chǔ)備-animation屬性1.@keyframes規(guī)則知識儲(chǔ)備-animation屬性2.animation屬性animation-name屬性用于定義使用@keyframes定義的動(dòng)畫的名稱。1.animation-nameanimation-name:keyframename|none;知識儲(chǔ)備-animation屬性2.animation屬性animation-duration屬性用于定義整個(gè)動(dòng)畫效果完成所需要的時(shí)間。time常用單位為秒（s）或毫秒（ms）。2.animation-durationanimation-duration:time;知識儲(chǔ)備-animation屬性2.animation屬性animation-timing-function用來規(guī)定動(dòng)畫的速度曲線，可以定義使用哪種方式來執(zhí)行動(dòng)畫效果。3.animation-timing-functionanimation-timing-function:value;屬性值描述linear表示過渡過程均勻變化。ease默認(rèn)值。初始速度同linear一致，然后加快，最后慢慢結(jié)束。ease-in表示以慢速開始，然后逐漸加快（淡入效果）ease-out表示以快速開始，然后逐漸減速（淡出效果）ease-in-out表示以慢速開始、中間加快、結(jié)束前減速cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中自己的值。取值范圍一般是從0到1的數(shù)值。知識儲(chǔ)備-animation屬性2.animation屬性animation-delay屬性用于定義執(zhí)行動(dòng)畫效果之前延遲的時(shí)間，也就是規(guī)定動(dòng)畫什么時(shí)候開始。4.animation-delayanimation-delay:time;

定義動(dòng)畫開始前延遲的時(shí)間知識儲(chǔ)備-animation屬性2.animation屬性animation-iteration-count屬性用于定義動(dòng)畫的播放次數(shù)。5.animation-iteration-countanimation-iteration-count:number|infinite;

播放動(dòng)畫的次數(shù)

指定動(dòng)畫循環(huán)播放知識儲(chǔ)備-animation屬性2.animation屬性定義當(dāng)前動(dòng)畫播放的方向，即動(dòng)畫播放完成后是否逆向交替循環(huán)。6.animation-directionanimation-direction:normal|reverse|alternate|alternative-reverse;

動(dòng)畫正常播放alternate屬性值會(huì)使動(dòng)畫在奇數(shù)次數(shù)（1、3、5等）正常播放，而在偶數(shù)次數(shù)（2、4、6等）逆向播放

反方向播放動(dòng)畫

奇數(shù)次逆向播放，偶數(shù)次正向播放知識儲(chǔ)備-animation屬性2.animation屬性animation屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中綜合設(shè)置以上六個(gè)屬性。使用animation屬性時(shí)必須指定animation-name和animation-duration屬性，否則持續(xù)的時(shí)間為0，動(dòng)畫永遠(yuǎn)不會(huì)播放。7.animationanimation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;知識儲(chǔ)備-animation屬性2.animation屬性實(shí)例解析animation屬性的用法動(dòng)畫效果鼠標(biāo)放到box上時(shí)，小球延遲1s無限次的勻速來回運(yùn)動(dòng)，持續(xù)時(shí)間為3s。animation-name:slide;/*動(dòng)畫名稱為slide*/animation-duration:3s;/*動(dòng)畫持續(xù)時(shí)間為3s*/animation-timing-function:linear;/*速度曲線為linear*/animation-delay:1s;/*動(dòng)畫延遲時(shí)間為1s*/animation-iteration-count:infinite;/*循環(huán)播放*/animation-direction:alternate;/*奇數(shù)正向播放、偶數(shù)逆向播放*/animation:slide2slinear1sinfinitealternate;設(shè)置哪些屬性？1.創(chuàng)建動(dòng)畫知識儲(chǔ)備1.用@keyframes創(chuàng)建動(dòng)畫@keyframes：創(chuàng)建動(dòng)畫animation-name

：動(dòng)畫名稱animation-duration

：動(dòng)畫完成時(shí)間animation-timing-function

：速度曲線animation-delay：延遲時(shí)間animation-iteration-count：動(dòng)畫播放次數(shù)animation-direction：動(dòng)畫方向animation：復(fù)合屬性總結(jié)任務(wù)分析<header>div.topdiv.bottom<footer>任務(wù)實(shí)施任務(wù)實(shí)施2任務(wù)7.2制作“漫游科技館”模塊效果展示知識儲(chǔ)備可以使元素從一種樣式轉(zhuǎn)變?yōu)榱硪环N樣式時(shí)看起來比較平滑，例如漸顯、漸隱等。為什么使用過渡？transition屬性知識儲(chǔ)備transition-duration屬性：持續(xù)時(shí)間2transition-timing-function屬性：速度曲線3transition-property屬性：過渡屬性1transition屬性5transition-delay屬性：延遲時(shí)間4transition屬性知識儲(chǔ)備transition屬性transition-property屬性是設(shè)置應(yīng)用過渡的CSS屬性，例如，寬度屬性、背景屬性等。1.transition-propertytransition-property:none|all|property;示例：transition-property：color；

沒有任何CSS屬性有過渡效果

所有CSS屬性都有過渡效果

應(yīng)用過渡效果的CSS屬性名稱知識儲(chǔ)備transition屬性transition-duration屬性用于定義過渡效果花費(fèi)的時(shí)間，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）2.transition-durationtransition-duration:time;示例：transition-duration：2s；知識儲(chǔ)備transition屬性transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認(rèn)值為“ease“。3.transition-timing-functiontransition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);知識儲(chǔ)備transition屬性屬性值描述linear指定以相同速度開始至結(jié)束的過渡效果。ease指定以慢速開始，然后加快，最后慢慢結(jié)束的過渡效果ease-in指定以慢速開始，然后逐漸加快（淡入效果）的過渡效果ease-out指定以慢速結(jié)束（淡出效果）的過渡效果。ease-in-out指定以慢速開始和結(jié)束的過渡效果。cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在0~1之間。transition-timing-function屬性的取值transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認(rèn)值為“ease“。3.transition-timing-function知識儲(chǔ)備transition屬性transition-delay屬性規(guī)定過渡效果何時(shí)開始，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）。4.transition-property基本語法格式transition-delay:time;正數(shù):過渡動(dòng)作會(huì)延遲觸發(fā)。負(fù)數(shù)：過渡動(dòng)作會(huì)從該時(shí)間點(diǎn)開始，之前的動(dòng)作被截?cái)?。示例：transition-delay：1s；知識儲(chǔ)備transition屬性transition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個(gè)過渡屬性。5.transition基本語法格式transition：propertydurationtiming-functiondelay;使用transition屬性設(shè)置多個(gè)過渡效果時(shí)，它的各個(gè)參數(shù)必須按照順序進(jìn)行定義，不能顛倒。例如：transition:border-radius5sease-in-out2s;知識儲(chǔ)備transition屬性使用過渡需要滿足以下兩個(gè)條件：元素必須具有狀態(tài)變化；必須為每個(gè)狀態(tài)設(shè)置不同的樣式-樣式變化。知識儲(chǔ)備transition屬性實(shí)例解析transition屬性的用法動(dòng)畫效果動(dòng)畫效果為鼠標(biāo)指針放到div上延遲1s后，div形狀和顏色在2s內(nèi)逐漸變化，過渡效果為以慢速開始，然后逐漸加快。transition-property：形狀、顏色；transition-duration：2s；transition-timing-function：ease-in；transition-delay：1s；transition:all2sease-in1s;設(shè)置哪些屬性？狀態(tài)變化？知識導(dǎo)圖任務(wù)分析任務(wù)7.2制作“中國夢”頁面——漫游科技館模塊鼠標(biāo)放到a上時(shí)，div.cur逐漸顯示，怎么實(shí)現(xiàn)？可以調(diào)整div.cur的位置，剛開始在左側(cè)隱藏，鼠標(biāo)放到a上時(shí)，div.cur位置正常，并使用過渡逐漸顯示div.bottomdiv.cura>img<h3><span><h2>任務(wù)實(shí)施任務(wù)實(shí)施3任務(wù)7.3制作“科普世界”模塊效果展示任務(wù)7.3制作“科普世界”模塊知識儲(chǔ)備在CSS3之前，如果需要為頁面設(shè)置變形效果，需要依賴于圖片、Flash或JavaScript才能完成。CSS3出現(xiàn)后，通過transform屬性就可以實(shí)現(xiàn)變形效果，包括元素的縮放、旋轉(zhuǎn)、移動(dòng)、傾斜等變形效果。平移縮放旋轉(zhuǎn)傾斜CSS3的變形（transform）屬性可以讓元素在一個(gè)坐標(biāo)系統(tǒng)中變形?；菊Z法格式transform：none|transform-functions;知識儲(chǔ)備transform屬性

默認(rèn)值，表示不進(jìn)行變形

變形函數(shù)，可以是一個(gè)或多個(gè)變形函數(shù)列表知識儲(chǔ)備transform屬性在CSS3中，使用scale()可以實(shí)現(xiàn)元素縮放效果。該函數(shù)包含兩個(gè)參數(shù)值，分別用來定義寬度和高度的縮放比例?？s放transform:scale(x,y);x、y分別指元素寬度和高度的縮放倍數(shù)。x、y可以是整數(shù)、負(fù)數(shù)和小數(shù)，取值絕對值大于1表示放大元素，取值絕對值小于1表示縮小元素，取值為負(fù)數(shù)表示反轉(zhuǎn)元素。如果y值省略，則高度和寬度的縮放倍數(shù)相同知識儲(chǔ)備transform屬性在CSS3中，使用rotate()可以旋轉(zhuǎn)指定的元素對象。旋轉(zhuǎn)transform:rotate(angle);參數(shù)angle表示旋轉(zhuǎn)的角度，角度單位為deg。角度為正時(shí)，按照順時(shí)針方向旋轉(zhuǎn)；角度為負(fù)時(shí)，按照逆時(shí)針方向旋轉(zhuǎn)。知識儲(chǔ)備transform屬性平移是指元素位置的變化，包括水平移動(dòng)和垂直移動(dòng)。在CSS3中，使用translate()可以實(shí)現(xiàn)元素的平移效果。平移transform:translate(x,y);注意：x指元素在水平方向上移動(dòng)的距離，y指元素在垂直方向上移動(dòng)的距離。x、y值為帶有長度單位標(biāo)志符的數(shù)值，可以取0、正值和負(fù)值：若取值為正，則表示向右或向下移動(dòng)；若取值為負(fù)，則表示向左或向上移動(dòng)。知識儲(chǔ)備transform屬性在CSS3中，使用skew()可以實(shí)現(xiàn)元素傾斜效果。兩個(gè)參數(shù)值分別用來定義X軸和Y軸坐標(biāo)傾斜的角度。如果省略了第二個(gè)參數(shù)，則取默認(rèn)值0。傾斜transform:skew(x-value,y-value);注意：參數(shù)x-angle和y-angle表示角度值，x-angle表示相對于X軸進(jìn)行傾斜，y-angle表示相對于Y軸進(jìn)行傾斜，如果省略了y-angle，則取默認(rèn)值0。知識儲(chǔ)備transform屬性transform可以設(shè)置多個(gè)變形函數(shù)，多個(gè)函數(shù)之間用空格間隔。多種變形transform:rotate(30deg)scale(1.2)；示