Web前端技術 課件 模塊二 任務6 新碟上架欄目實現(xiàn)

新碟上架欄目實現(xiàn)Web前端技術主講老師：***延時符CONTENTS目錄01任務描述03知識點導圖02學習目標

04相關知識05任務實施延時符任務描述延時符任務描述網頁中的容器空間是有限的，如果容器里需要展示的內容超出了容器尺寸，通常的方法是采用輪播或者滾動的方式展現(xiàn)，可用CSS的動畫功能實現(xiàn)。本次任務是將上架的新碟在頁面右側以上下滾動的方式展現(xiàn).延時符頁面效果圖延時符學習目標延時符學習目標掌握CSS動畫的基本概念；掌握transform和transition配合設置動畫的方法；掌握animation和@keyframe配合設置動畫的方法；知識目標能夠根據效果圖合理使用動畫進行展示；能學會動畫設置的HTML和CSS方法；能學會@keyframe兩種配置方法；技能目標延時符培養(yǎng)分析問題、解決問題的能力；培養(yǎng)良好的審美觀念；培養(yǎng)責任感、競爭意識、團隊合作和奉獻精神。素養(yǎng)目標知識點導圖延時符知識點導圖延時符相關知識延時符transform和transform-origintransitionanimation使用方法CSS樣式:動畫延時符CSS動畫使元素逐漸從一種樣式變?yōu)榱硪环N樣式。CSS動畫有三個主要優(yōu)點：1）能夠非常容易地創(chuàng)建簡單動畫，你甚至不需要了解JavaScript就能創(chuàng)建動畫。2）動畫運行效果良好，甚至在低性能的系統(tǒng)上。渲染引擎會使用跳幀或者其他技術以保證動畫表現(xiàn)盡可能的流暢。而使用JavaScript實現(xiàn)的動畫通常表現(xiàn)不佳（除非經過很好的設計）。3）讓瀏覽器控制動畫序列，允許瀏覽器優(yōu)化性能和效果，如降低位于隱藏選項卡中的動畫更新頻率。動畫包括兩個部分：1）描述動畫的樣式規(guī)則；2）用于指定動畫開始、結束以及中間點樣式的關鍵幀。CSS樣式：transform和transform-origin延時符動畫的樣式規(guī)則由transform和transform-origin兩個屬性實現(xiàn)2D變換。其中transform屬性用于實現(xiàn)平移、縮放、旋轉和傾斜等變換，transform-origin屬性則用于設置中心點的變換。語法格式如下：<style>選擇器{Transform:屬性值;}</style>CSS樣式：transform和transform-origin延時符常用屬性值有：平移translate(x,y)平移有三種變化：

translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）。

translateX(x)僅水平方向移動（X軸移動）。

translateY(y)僅垂直方向移動（Y軸移動）。舉例：transform:translate(50px,50px)；效果??圖所示。解釋：使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。注：坐標值可以為負值或百分比值CSS樣式：transform和transform-origin延時符縮放scale(x,y)縮放有三種變化：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）。scaleX(x)元素僅水平方向縮放（X軸縮放）。scaleY(y)元素僅垂直方向縮放（Y軸縮放）。

舉例：transform:scale(0.8,1);效果??圖所示。解釋：使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。CSS樣式：transform和transform-origin延時符旋轉rotate(deg)可以對元素進行旋轉，正值為順時針，負值為逆時針；

舉例：transform:rotate(45deg);效果如??圖所示。解釋：使用rotate方法使該元素以中心點為原點旋轉45度屬性transform-origin可以調整元素轉換變形的原點，比如改變元素原點到左上角，然后進行順時旋轉45度，代碼如下：div{transform-origin:lefttop;transform:rotate(45deg);}注：如果是4個角，可以用lefttop這些，如果想要精確的位置，可以用px像素。CSS樣式：transform和transform-origin延時符傾斜skew(deg,deg)可使元素在水平和垂直方向上傾斜一定角度，第二個參數(shù)不寫默認為0。

舉例：transform:skew(30deg,0deg);效果右圖所示。解釋：該實例通過skew方法把元素水平方向上傾斜30度，垂直方向保持不變。Transform使用方法視頻講解CSS樣式：transition延時符在CSS3引入Transition（過渡）這個概念之前，CSS是沒有時間軸的。也就是說，所有的狀態(tài)變化，都是即時完成。當鼠標移到藍色方塊上時，寬高瞬間發(fā)生變化子代選擇符/后代選擇符視頻講解CSS樣式：transition延時符引入transition屬性可以被指定為一個或多個CSS屬性的過渡效果，多個屬性之間用逗號進行分隔。transitionCSS屬性是transition-property，transition-duration，transition-timing-function和transition-delay的一個簡寫屬性。語法格式如下：

transition:[transition-property][transition-duration][transition-timing-function][transition-delay]transition-property指定應用過渡屬性的名稱(如background)。值可以為三種：none，all（默認），屬性名稱。transition-duration過渡動畫所需的時間。默認值為0s，表示不出現(xiàn)過渡動畫。transition-timing-function描述動畫中間值是怎樣計算。transition-delay開始作用之前需要等待的時間CSS樣式：transition延時符其中：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);linear規(guī)定以相同速度開始至結束的過渡效果（等于cubic-bezier(0,0,1,1)）。ease規(guī)定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in規(guī)定以慢速開始的過渡效果（等于cubic-bezier(0.42,0,1,1)）。ease-out規(guī)定以慢速結束的過渡效果（等于cubic-bezier(0,0,0.58,1)）。ease-in-out規(guī)定以慢速開始和結束的過渡效果（等于cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中定義自己的值?？赡艿闹凳?至1之間的數(shù)值。transition使用方法視頻講解CSS樣式：animation延時符transform和transition配合使用可以實現(xiàn)簡單的動畫，但如果實現(xiàn)更豐富的動畫效果，則需要更專業(yè)的animation動畫設置。在CSS3中創(chuàng)建動畫,需要學習@keyframes規(guī)則。通過在動畫序列中定義關鍵幀的樣式來控制CSS動畫序列中的中間步驟。和轉換transition相比，關鍵幀可以控制動畫序列的中間步驟。它的寫法相當自由，可用0%-100%間的任意時間段定義動畫各個狀態(tài)，也可以使用from-to來定義，其中from相當于0%，to相當于100%。一般采用百分比來控制各關鍵幀。語法格式如下：@keyframesanimationname{keyframes-selector{css-styles;}}CSS樣式：animation延時符CSS動畫用animation調用關鍵幀實現(xiàn)動畫效果，其語法格式如下：animation:namedurationtiming-functiondelayiteration-countdirection;1.animation-name規(guī)定需要綁定到選擇器的keyframe名稱2.animation-duration規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是0。3.animation-timing-function規(guī)定動畫的速度曲線。默認是“ease”。4.animation-delay規(guī)定動畫何時開始。默認是0。5.animation-iteration-count規(guī)定動畫被播放的次數(shù)。默認是1。6.animation-direction規(guī)定動畫是否在下一周期逆向地播放。默認是“normal”;alternate(輪流)。animation和@keyframe的使用方法視頻講解任務實施延時符結構分析樣式分