《HTML5+CSS3+JavaScriptWeb前端開發(fā)案例教程》課件 第7章 CSS3布局與動畫

CSS3布局與動畫實(shí)現(xiàn)購物網(wǎng)站中的“主題購”頁面案例描述

本案例中我們將使用CSS3中的布局實(shí)現(xiàn)購物網(wǎng)站中的“主題購”頁面。技術(shù)準(zhǔn)備display屬性

float屬性display屬性float屬性語法格式CSS3選擇器{float：right或left}案例實(shí)現(xiàn)鼠標(biāo)指針滑過圖片時(shí)的平移效果案例描述

本案例實(shí)現(xiàn)當(dāng)鼠標(biāo)指針滑過圖片時(shí)的平移效果。將鼠標(biāo)指針停留在商品圖片上時(shí)，圖片會向左平移。技術(shù)準(zhǔn)備

變換（transform）變換（transform）語法格式<style>選擇器{transform:屬性值;

}</style>案例實(shí)現(xiàn)為導(dǎo)航菜單添加動畫特效案例描述

本案例實(shí)現(xiàn)一個(gè)導(dǎo)航菜單的動畫效果。當(dāng)鼠標(biāo)指針停留在某一個(gè)導(dǎo)航項(xiàng)上時(shí)，該項(xiàng)導(dǎo)航菜單就會逐漸下拉直至完全顯示，當(dāng)鼠標(biāo)指針離開該導(dǎo)航項(xiàng)時(shí)，其子菜單又會收起。技術(shù)準(zhǔn)備過渡（transition）過渡（transition）屬性值說明linear線性過渡，也就是勻速過渡。ease平滑過渡，過渡的速度會逐漸慢下來。ease-in由慢到快，也就是逐漸加速。ease-out由快到慢，也就是逐漸減速。ease-in-out由慢到快再到慢，也就是先加速后減速。cubic-bezier(x1,y1,x2,y2)特定的貝塞爾曲線類型，由于貝塞爾曲線比較復(fù)雜，所以此處不做過多描述。transition-timing-function屬性的屬性值案例實(shí)現(xiàn)CSS3實(shí)現(xiàn)網(wǎng)頁輪播圖案例描述

輪播圖是網(wǎng)頁中比較常見的一部分，而CSS3可以制作出精美的輪播圖動畫，本案例使用CSS3制作輪播圖動畫，每過一段時(shí)間，圖片會自動向左滑動切換。技術(shù)準(zhǔn)備關(guān)鍵幀動畫屬性關(guān)鍵幀語法格式@keyframesname{<keyframes-blocks>};

舉例@-webkit-keyframescomplexAnim{0%{opacity:0;}20%{opacity:1;}50%{-webkit-transform:scale(0.6);}80%{opacity:1;}100%{opacity:0;}}動畫屬性屬性屬性值說明animation復(fù)合屬性。以下屬性的值的綜合用于指定對象所應(yīng)用的動畫特效animation-namename指定對象所應(yīng)用的動畫名稱animation-durationtime+單位s（秒）指定對象動畫的持續(xù)時(shí)間animation-timing-function其屬性值與transition-timing-function屬性值相關(guān)指定對象動畫的過渡類型animation-delaytime+單位s（秒）指定對象動畫延遲的時(shí)間animation-iteration-countnumber或infinite（無限循環(huán)）指定對象動畫的循環(huán)次數(shù)animation-directionnormal（默認(rèn)值，表示正常方向）或alternate（表示正常與反向交替）指定對象動畫在循環(huán)中是否反向運(yùn)動animation-play-staterunning（默認(rèn)值，表示運(yùn)動）或paused（表示暫停）指定對象動畫的狀態(tài)，animation-fill-modenone：表示不設(shè)置動畫之外的狀態(tài)，默認(rèn)值；forwards：表示設(shè)置對象狀態(tài)為動畫結(jié)束時(shí)的狀態(tài)；backwards表示設(shè)置對象狀態(tài)為動畫開始時(shí)的狀態(tài)；both：表示設(shè)置對象狀態(tài)為動畫結(jié)束或開始的狀態(tài)。指定