第11章 CSS 中的動畫與特效_第1頁
第11章 CSS 中的動畫與特效_第2頁
第11章 CSS 中的動畫與特效_第3頁
第11章 CSS 中的動畫與特效_第4頁
第11章 CSS 中的動畫與特效_第5頁
已閱讀5頁，還剩41頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第11章CSS中的

動畫與特效掌握CSS中變形、過度、動畫三種特效的定義方式純CSS方式實現網頁輪播圖效果學習目標0103靈活運用三種特效設置頁面中的動畫效果02本章任務任務1：CSS中的動畫與特效——transform任務2：CSS中動畫與特效——transition任務3：CSS中動畫與特效——animation任務4：案例實戰——純CSS實現輪播圖效果任務1CSS中的動畫與特效—transform任務描述本案例將三張獨立的圖片，通過transform屬性的rotate、skew、scale等子屬性的調用，形成三個旋轉的立方體面，再通過定位方式將其結合成一個立體的禮品盒子樣式圖12-1-1：設計禮品盒子布局代碼樣式代碼任務分析設計一大個容器盒子DIV，其內放置三個小容器盒子。在三個小盒子中分別放置三張素材圖片作為立體盒子的三個立體面。定義三個立體面的skew（切變）和rotate角度使用絕對定位方式將三個面拼成一個立體盒子。熟悉掌握transform屬性的rotate、skew、scale布局代碼樣式代碼基本語法Transform屬性初始值是none，適用于塊元素和行內元素，其基本語法如下：transform：none|<transform-function>[<transform-function>]*transform:rotate|scale|skew|translate|matrix;其中none就是默認值，不進行變形。<transform-function>:表示一個或多個變換函數，以空格分開。即可同時對一個元素進行transform的多種屬性操作，例如同時用rotate，scale和translate三種。語法解析基本語法transform-function的可取值基礎案例操作1．旋轉rotateRotate（）函數能夠旋轉指定的對象，通過給定的參數值，來指定對象旋轉的角度，元素對象可以是內聯元素和塊狀元素。用法：transform:rotate(xdeg,ydeg)。單位deg為單位：度的意思，正數為順時針旋轉，負數為逆時針旋轉。布局代碼：<divclass="box"><divclass="squarerotate"></div></div>CSS代碼：/*灰色背景*/.box{width:200px;height:200px;background-color:#ddd;margin:40pxauto;}/*紅色方塊*/.square{width:200px;height:200px;background-color:#FF0000;transition:0.3s;/*設置變形的效果持續的時長*/position:relative;opacity:0.5;}.rotate:hover{transform:rotate(45deg);/*設置鼠標移動到紅色方塊上，紅色方塊順時針旋轉45度*/}基礎案例操作2．平移translatetranslate()函數能夠重新定位元素的坐標，該函數包含兩個參數值，分別定義X軸坐標和Y軸坐標。用法：transform:translate(x,y)；參數表示移動距離。取值可以是px,em，百分比等。CSS代碼如下：.translate:hover{transform:translate(50px,50px);/*設置鼠標移動到紅色方塊上，紅色方塊向右，向下分別平移50像素的位置*/}基礎案例操作3．縮放scalescale()函數能夠縮放元素大小，該函數包含兩個參數值，分別用來定義寬和高縮放比例。用法：transform:scale(x,y)；這里的參數表示縮放倍數。縮放基數為1，如果其值大于1元素就放大，反之其值小于1，元素縮小，取值也可為負數，負數值不會縮小元素，而是翻轉元素，然后再縮放；如果省略第二個參數，則第二個參數值等同于第一個參數。CSS代碼如下：.scale:hover{transform:scale(1.5,0.5);/*設置鼠標移動到紅色方塊上，紅色方塊水平放大1.5倍，垂直縮小0.5倍*/}基礎案例操作4．切變skewSkew()函數能夠讓元素傾斜顯示，該函數包含兩個參數，分別用來定義X軸和Y軸坐標傾斜的角度，使對象產生一定程度的變形效果，語法格式如下：用法：transform:skew(xdeg,ydeg)。如果省略第二個參數，則第二個參數默認值為0。CSS代碼如下：.skew:hover{transform:skew(-10deg,-10deg);/*設置鼠標移動到紅色方塊上，紅色方塊繞X軸傾斜10度，繞Y軸傾斜10度*/}基礎案例操作5．元素基點Transform-originCSS變形的原點默認為對象的中心點，如果要改變這個中心點，可以借助transform-origin()屬性進行定義。用法：transform-origin(x,y):用來設置元素的基點（參考點）。默認點是元素的中心點。x，y的值可以是百分比，em,px，其中x也可以是left,center,right，y可以是top,center,bottom，這點和background-position一樣。分別修改旋轉案例的元素基點為右上和左下CSS代碼如下：.skew:hover{transform:skew(-10deg,-10deg);/*設置鼠標移動到紅色方塊上，紅色方塊繞X軸傾斜10度，繞Y軸傾斜10度*/}任務實現布局代碼布局代碼如下：<body><divclass="cube"><!--盒子包裹框--><divclass="topFace"><!--頂面--><div><imgsrc="img/top.jpg"></div></div><divclass="leftFace"><!--左側面--><div><imgsrc="img/left.jpg"></div></div><divclass="rightFace"><!--右側面--><div><imgsrc="img/right.jpg"></div></div></div></body>任務描述任務分析任務實現樣式代碼CSS代碼如下：<styletype="text/css">/*外盒包裹框*/.cube{top:200px;left:50%;margin-left:-200px;position:absolute;}/*定義所有圖片大小*/.cubeimg{width:180px;height:180px;}/*盒子3個面絕對定位*/.leftFace,.rightFace,.topFace{position:absolute;}/*左側面變形*/.leftFace{transform:skew(0deg,30deg);}/*右側面變形*/.rightFace{transform:skew(0deg,-30deg);left:180px;}/*頂面圖片變形放大*/.topFacediv{transform:skew(0deg,-30deg)scale(1,1.16)}/*頂面旋轉后定位*/.topFace{transform:rotate(60deg);top:-142px;left:89px;}</style>任務描述任務分析任務2CSS中動畫與特效—transition任務描述本案例設計夜空背景中放置3個光球,當鼠標移動到夜空中的光球上，光球會再分離出兩個不同的光球，同時夜空背景在一定的間隔時間內會產生切換效果圖12-2-1：夜空光球觸發布局代碼樣式代碼任務分析1.設計一大個容器盒子DIV，將背景圖片放置在盒子內，同時放置一個小盒子，包裹3張光球圖片。2.定義背景圖片和小光球圖片的樣式如上圖。3.為小光球圖片設置絕對定位，定義光球的transform()的translate性，產生hover觸發的位移效果。4.對盒子對象中的背景圖片設置浮動效果，使用overflow:hidden盒子外的圖片隱藏，定義盒子的transform()的translate屬性，產生hover觸發的位移效果。5.使用transition()控制以上效果的時長和漸變方式。布局代碼樣式代碼基本語法其基本語法如下：transition:propertydurationtiming-functiondelay;transition有四個屬性值：transition-property:選擇執行過渡效果的屬性transition-duration:指定完成過渡需要的時間transition-timing-function,在延續時間段，過渡變換的速率變化，簡單理解就是指定過渡函數或緩動函數transition-delay:過渡延遲時間transition用來描述如何讓css屬性值在一段時間內平滑的從一個值過渡到另一個值。這種過渡效果可以在鼠標點擊、獲得焦點、被點擊或對元素任何改變中觸發基礎案例操作1．觸發實現一般地，過渡transition的觸發有三種方式，分別是偽類觸發、媒體查詢觸發和javascript觸發。其中常用偽類觸發包括:hover、:focus、:active等，下面我們給大家列舉偽類觸發。案例：多種方式改變盒子對象的寬度觸發布局代碼如下：<divclass="boxenlarge"></div>CSS代碼如下：.box{width:100px;height:100px;background-color:#FF0000;margin:20px;text-align:center;}/*1、hover觸發實現，鼠標懸浮在對象上*/.enlarge:hover{width:200px;}/*2、active觸發實現，點擊時按住鼠標不放*/.enlarge:active{width:200px;}/*3、focus觸發實現，單擊鼠標不放，這里focus指能獲取焦點的對象，如表單對象等*/.enlarge:focus{width:200px;}基礎案例操作2．增加過渡時間用法：transition-duration：過渡持續時間(單位為s或者ms),是必需值且不能為0，過渡時間為0則無法看到過渡的過程，直接顯示結果。案例：transition-duration布局代碼如下：<divclass="boxenlargeduration">CSS代碼如下：.duration{transition:3s;/*設置過渡時長為3S*/}布局代碼如下：<divclass="boxenlargedurationdelay">延遲2S觸發</div>CSS代碼如下：/*延遲時間*/.delay{transition-delay:2s;/*設置動畫過渡效果延遲2S播放*/}基礎案例操作3．增加延遲時間用法：transition-delay：過渡延遲時間(單位為s或者ms)，當使用transition復合屬性定義時，如定義內容中出現兩個時間值，則第一個是持續時間，第二個是延遲時間案例：：transition-delay布局代碼如下：<divclass="boxmove-and-color">CSS代碼如下：/*對象移動并變色*/.move-and-color{position:relative;left:40px;/*定義盒子的初始位置*/transition-property:left,background-color;/*定義盒子的位置和背景色為動畫屬性*/transition-duration:3s;/*定義過渡時長為3S*/}.move-and-color:active{/*定義盒子單擊時，盒子位置和背景顏色的改變*/left:350px;background-color:#00008B;}基礎案例操作4．增加多屬性變化用法：transition-property:過渡屬性(默認值為all),我們可以指定動畫為某一特定屬性，也可同時為多個屬性指定不同的過渡效果。案例：transition-property基本語法5.transiton-timing-function用法：過渡函數(默認值為ease函數),用于定義元素過渡屬性隨時間變化的過渡速度變化效果任務實現布局代碼<body><divid="wrapper"><divid="box"><imgsrc="images/night.jpg"class="pics"><imgsrc="images/night1.jpg"class="pics2"><imgsrc="images/night2.jpg"class="pics3"><divid="pic"><imgsrc="images/flower1.jpg"class="pic1"><imgsrc="images/flower2.jpg"class="pic2"><imgsrc="images/flower3.jpg"class="pic3"></div></div></div></body>任務描述任務分析任務實現樣式代碼40任務描述任務分析任務3CSS中動畫與特效—animation任務描述本案例設計一個盒子外框，其內包含一個小球，頁面加載完畢，小球即可自動在框內循環滾動，如圖12-3-1。圖12-3-1：循規蹈矩的“小球運動”布局代碼樣式代碼任務分析定義盒子外框，設置邊框線，相對定位定義盒子內小球，設置背景色，絕對定位在框體左上角設定小球停留的位置分別為包裹框的4個角，將4個角的位移定義為4個關鍵幀，在animation屬性中定義相應的動畫效果。布局代碼樣式代碼基本語法animationanimation屬性與transition功能相似，都是通過改變元素的屬性值來實現動畫效果的，二者的區別在于，使用transition只能通過制定屬性的開始值與結束值，然后在這兩者之間進行平滑過渡的方式來產生動畫效果，而animation則通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現更為復雜的動畫效果。基本語法：animation:namedurationtiming-functiondelayiteration-countdirection;animation的六個屬性值：基本語法keyframeskeyframes意思是“關鍵幀”，在關鍵幀會改變元素屬性的計算值。注意：0%中的%不能省略，省略則整個keyframes語法錯誤，整條規則無效，因為keyframes的單位只接受百分比值。keyframes語法：@keyframesanimationname{keyframes-selector{css-styles;}}語法解釋：基礎案例操作1．@keyframe屬性@keyframe關鍵幀定義圖片對象屬性值，即在整個動畫過程中，對象需要呈現的變化內容【案例1】：通過animation和@keyframes來定義圖片對象的位移方式基礎案例操作1．@keyframe屬性@keyframe關鍵幀定義圖片對象屬性值，即在整個動畫過程中，對象需要呈現的變化內容【案例2】：在案例1上修改關鍵幀的定義方式如下：基礎案例操作2．animation-name屬性要讓畫面動起來，光有關鍵幀不夠，還得要定義animation屬性，即變化的方式。基礎案例操作3．animation-duration用來規定完成動畫所花費的時間，這個不能省略，否則時長為0，就不會播放動畫了。基礎案例操作4.animation-iteration-count用來設置動畫應該播放的次數，默認是1次，可以設置數字或者infinite。5.animation-delay表示延遲多長時間開始動畫。這個效果與transition一致。基礎案例操作6.animation-direction設置動畫播放方向，取值有三種：normal：默認值，每個循環動畫向前播放，換言之，每個動畫循環結束，動畫重置到起點重新開始。alternate：奇數按順序播放各幀動畫，偶數按逆序播放各幀動畫。reverse:逆序播放各幀動畫任務實現布局代碼<!--布局代碼--><body><divid="ball"><span></span></div></body>任務描述任務分析任務實現樣式代碼<!--CSS樣式--><styletype="text/css">/*外框樣式定義*/#ball{width:200px;height:200px;border:1pxsolidred;margin:20pxauto;}/*小球樣式定義*/#ballspan{display:inline-block;width:20px;height:20px;background:#000000;;border-radius:100%;animation:around8s1sinfinite,color5sinfinite;/*定義兩種動畫around和color的播放形式*/animation-timing-function:linear;/*定義動畫播放方式為線性*/}@keyframescolor{/*顏色變化從黑到紅*/from{background-color:#000000;}to{background-color:#FF0000;}}/*小球位置變化從框左上角的點沿框行走最終繞回原點*/@keyframesaround{/*原點位置*/0%{transform:translateX(0);}/*右上角位置*/25%{transform:translateX(180px);}/*右下角位置*/50%{transform:translate(180px,180px);}/*左下角位置*/75%{transform:translateY(180px);}/*返回原點*/100%{transform:translateY(0px);}}</style>任務描述任務分析任務4案例實戰——純CSS實現輪播圖效果任務描述根據給定的5張素材圖片，設計在規定的時間內讓5張圖片在顯示框中依次出現圖12-4-1：純CSS實現輪播圖效果任務分析調整圖片格式，大小一致。將圖片橫排放在一個圖片容器里面。在圖片容器外再加一個展示容器，展示容器大小為單張圖片大小。對圖片設置位移動畫，位移量為單張圖片的寬度值，布局參考

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論