CSS3布局與動畫實現購物網站中的“主題購”頁面案例描述

本案例中我們將使用CSS3中的布局實現購物網站中的“主題購”頁面。技術準備display屬性

float屬性display屬性float屬性語法格式CSS3選擇器{float：right或left}案例實現鼠標指針滑過圖片時的平移效果案例描述

本案例實現當鼠標指針滑過圖片時的平移效果。將鼠標指針停留在商品圖片上時，圖片會向左平移。技術準備

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

}</style>案例實現為導航菜單添加動畫特效案例描述

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

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

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