《WEB前端開發(fā)技術(shù)》課件-動(dòng)畫效果_第1頁
《WEB前端開發(fā)技術(shù)》課件-動(dòng)畫效果_第2頁
《WEB前端開發(fā)技術(shù)》課件-動(dòng)畫效果_第3頁
《WEB前端開發(fā)技術(shù)》課件-動(dòng)畫效果_第4頁
《WEB前端開發(fā)技術(shù)》課件-動(dòng)畫效果_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

Web前端開發(fā)技術(shù)變形、過渡與動(dòng)畫項(xiàng)目七

首頁引入過渡、變形、動(dòng)畫效果目錄CONTENT設(shè)置動(dòng)畫效果的方法制作動(dòng)畫片段12本任務(wù)首先介紹動(dòng)畫效果的基礎(chǔ)知識(shí)，然后通過為頁面?zhèn)冗厵谔砑觿?dòng)畫效果，練習(xí)在網(wǎng)頁中應(yīng)用動(dòng)畫效果的方法。動(dòng)畫效果使用transition屬性只能在一個(gè)開始值與一個(gè)結(jié)束值之間添加過渡效果，無法設(shè)置中間值，而CSS3中的動(dòng)畫功能不僅可以制作出過渡效果，還可以通過設(shè)置關(guān)鍵幀制作變化多樣的動(dòng)畫片段。關(guān)鍵幀制作動(dòng)畫必須先設(shè)置關(guān)鍵幀，一個(gè)關(guān)鍵幀代表動(dòng)畫變化過程中的一個(gè)狀態(tài)。在CSS3中，使用@keyframes命令定義關(guān)鍵幀，具體格式為：@keyframesname{selector{css-styles;}}name表示動(dòng)畫名稱selector表示關(guān)鍵幀的時(shí)間位置，也就是動(dòng)畫時(shí)長的百分比，還可以使用參數(shù)from(等價(jià)于0%)和to(等價(jià)于100%)表示動(dòng)畫的開始和結(jié)束css-styles表示對(duì)應(yīng)關(guān)鍵幀的樣式屬性，可以設(shè)置多個(gè)屬性在CSS3中，使用animation-name屬性設(shè)置要應(yīng)用的動(dòng)畫名稱，具體格式為：動(dòng)畫效果相關(guān)屬性動(dòng)畫名稱animation-name:namelnonename表示動(dòng)畫名稱，屬性值為想要應(yīng)用的@keyframes動(dòng)畫名稱none表示不應(yīng)用或取消動(dòng)畫動(dòng)畫效果相關(guān)屬性在CSS3中，使用animation-duration屬性設(shè)置動(dòng)畫效果播放一次的時(shí)長，具體格式為：animation-duration:time;設(shè)置方法與transition-duration屬性相同。動(dòng)畫時(shí)間動(dòng)畫效果相關(guān)屬性在CSS3中，使用animation-timing-function屬性設(shè)置動(dòng)畫效果的速度曲線，具體格式為：animation-timing-function:cubiczier(n,n,n,n)llinerleaselease-inlease-out;設(shè)置方法與transition-timing-function相同。動(dòng)畫的速度曲線動(dòng)畫效果相關(guān)屬性4.延遲時(shí)間在CSS3中，使用animation-delay屬性設(shè)置動(dòng)畫開始之前需要等待的時(shí)間，具體格式為：animation-delay:time;設(shè)置方法與transition-duration屬性相同動(dòng)畫效果相關(guān)屬性在CSS3中，使用animation-iteration-count屬性設(shè)置動(dòng)畫播放的次數(shù)，具體格式為：animation-iteration-count:numberlinfinite播放次數(shù)number表示動(dòng)畫播放的次數(shù)，屬性值為正整數(shù)，默認(rèn)值為1infinite表示循環(huán)播放制作帶有動(dòng)畫效果的照片墻的演示制作帶有動(dòng)畫效果的照片墻的演示<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title></title> <style> img{

width:150px; display:inline-block; margin-left:25px; padding:15px; box-shadow:03px6px#555555; } div{ position:relative; perspective:300px; } img:hover{ animation:move1.5s; } @keyframesmove{ 25%{

transform:rotateY(5deg); } 75%{

transform:rotateY(-5deg); } } </style>

</head><body> <div> <imgsrc="images/ex_4.png"style="transform:rotate(-5deg);position:absolute;top:65px;left:10px;"/> <imgsrc="images/ex_5.png"style="transform:rotate(-2deg);position:absolute;top:25px;left:210px;"/> <imgsrc="images/ex_6.png"style="transform:rotate(2deg);position:absolute;top:65px;left:410px"/> <imgsrc="images/ex_7.png"style="transform:rotate(5deg);position:absolute;top:25px;left:620px;"/> </div> </body></html>代碼解釋：img:hover{animation:move1.5s;}

/*設(shè)置鼠標(biāo)指針移動(dòng)至圖像元素上時(shí)應(yīng)用動(dòng)畫move,時(shí)長為1.5秒*/@keyframesmove{

25%{transform:rotateY(5deg);}

/*設(shè)置第一個(gè)關(guān)鍵幀的3D變形效果為繞y軸順時(shí)針旋轉(zhuǎn)5度*/75%{transform:rotateY(-5deg);}}

/*設(shè)置第二個(gè)關(guān)鍵幀的3D變形效果為繞y軸逆時(shí)針旋轉(zhuǎn)5度*/代碼解釋：img:hover{animation:move1.5s;}

/*該動(dòng)畫效果為：當(dāng)鼠標(biāo)指針移動(dòng)至圖像元素上時(shí)，圖像元素在三維坐標(biāo)系中先繞y軸順時(shí)針旋轉(zhuǎn)5度再逆時(shí)針旋轉(zhuǎn)10度(先旋轉(zhuǎn)5度變?yōu)閞otateY(0),再繼續(xù)旋轉(zhuǎn)5度),最后恢復(fù)原狀，總時(shí)長共1.5秒*/提示提示：與transit

溫馨提示

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

評(píng)論

0/150

提交評(píng)論