【W(wǎng)eb前端設(shè)計(jì)中基于CSS3的動畫特效應(yīng)用研究 3400字（論文）】_第1頁
【W(wǎng)eb前端設(shè)計(jì)中基于CSS3的動畫特效應(yīng)用研究 3400字（論文）】_第2頁
【W(wǎng)eb前端設(shè)計(jì)中基于CSS3的動畫特效應(yīng)用研究 3400字（論文）】_第3頁
【W(wǎng)eb前端設(shè)計(jì)中基于CSS3的動畫特效應(yīng)用研究 3400字（論文）】_第4頁
【W(wǎng)eb前端設(shè)計(jì)中基于CSS3的動畫特效應(yīng)用研究 3400字（論文）】_第5頁
已閱讀5頁，還剩2頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

Web前端設(shè)計(jì)中基于CSS3的動畫特效應(yīng)用研究目錄TOC\o"1-3"\h\u42681引言 1228592CSS3動畫的基本原理 131153CSS3動畫類型的技術(shù)剖析 130123.1transition動畫技術(shù) 1186843.2animation動畫技術(shù) 338984CSS32D、3D動畫效果與控制 5279064.1動畫效果 59154.2動畫控制 6112155結(jié)論 615424參考文獻(xiàn) 71引言CSS技術(shù)能夠控制網(wǎng)頁的布局，真正將頁面內(nèi)容與網(wǎng)頁表現(xiàn)進(jìn)行分離，但是很多效果還需要借助于圖片和腳本來實(shí)現(xiàn)，不易于維護(hù)網(wǎng)頁。CSS3.0新增了很多新屬性，如設(shè)置顏色、設(shè)置陰影、設(shè)置不透明度等，可以讓頁面代碼更加簡單明了，實(shí)現(xiàn)了以往CSS都無法實(shí)現(xiàn)或難以實(shí)現(xiàn)的效果。特別是CSS3.0增設(shè)的動畫屬性，可以讓網(wǎng)頁開發(fā)人員不用再去書寫繁雜的腳本，就能夠直接讓網(wǎng)頁中的指定元素動起來，而不會影響頁面的整體布局。高度跨平臺自適應(yīng)特性讓HTML5逐步走向技術(shù)前沿，現(xiàn)在HTML5已經(jīng)不僅僅代表HTML文檔本身，還代表著以HTML為首的CSS3、JavaScript、jQuery等一系列技術(shù)的集合，讓W(xué)eb前端頁面更加炫酷、更具用戶友好性。傳統(tǒng)的網(wǎng)頁動畫都是借助于Flash或JavaScript技術(shù)的，而基于CSS3技術(shù)的動畫代碼簡單、高效等優(yōu)勢讓設(shè)計(jì)師愛不釋手，將會成為未來Web動畫的主流。2CSS3動畫的基本原理Web前端設(shè)計(jì)是我校移動應(yīng)用技術(shù)與服務(wù)專業(yè)的一門核心專業(yè)課程。主要包含了HTML5、CSS3和JavaScript三大部分，其中CSS3在CSS基礎(chǔ)上新增了許多特性，而CSS3動畫技術(shù)則是眾多特性中最突出的一個，它功能強(qiáng)大、代碼簡約、直觀易懂、自適應(yīng)性強(qiáng)、可跨平臺使用，特別適合在Web前端設(shè)計(jì)中應(yīng)用。圖1補(bǔ)間動畫原理在講授CSS3動畫技術(shù)時，首先要讓學(xué)生了解電腦動畫的基本原理，電腦動畫分為三類：補(bǔ)間動畫、逐幀動畫和骨骼動畫。而CSS3動畫屬于補(bǔ)間動畫類型，如圖1所示。補(bǔ)間動畫就是在每一個關(guān)鍵幀上設(shè)置不同的位置、大小、形狀和顏色等屬性，CSS3動畫將根據(jù)每兩個關(guān)鍵幀的樣式來平滑過渡地創(chuàng)建它們之間的動畫。3CSS3動畫類型的技術(shù)剖析3.1transition動畫技術(shù)transition動畫從效果上看是一種平滑過渡的動畫，本質(zhì)上是在線性時間內(nèi)將屬性從開始值過渡到結(jié)束值。用transition可以將屬性值在指定時間內(nèi)平滑過渡，優(yōu)化用戶體驗(yàn)。transition動畫技術(shù)是在transform屬性的基礎(chǔ)之上，CSS3提供了位移、旋轉(zhuǎn)、縮放、傾斜4種基本變換transform屬性，可以實(shí)現(xiàn)對圖形及文字的變換。位移屬性的5種形式為：translate（x，y），在x軸和y軸方向的位置變化距離；translateX（x），在x軸方向的位置變化距離；translateY（y），在y軸方向的位置變化距離；translateZ（z），在z軸方向的位置變化距離；translate3d（x，y，z），在x軸、y軸和z軸方向的位置變化距離?？s放屬性的5種形式為：scale（x，y），在x軸和y軸方向的縮放比例；scaleX（x），在x軸方向的縮放比例；scaleY（y），在y軸方向的縮放比例；scaleZ（z），在z軸方向的縮放比例；scale3d（x，y，z），在x軸、y軸和z軸方向的縮放比例。旋轉(zhuǎn)屬性的5種形式為：rotate（angle），定義2D旋轉(zhuǎn)；rotate3d（x，y，z，angel），定義3D旋轉(zhuǎn)；rotateX（angel），在x軸方向的3D旋轉(zhuǎn)；rotateY（angle），在y軸方向的3D旋轉(zhuǎn)；rotateZ（angle），在z軸方向的3D旋轉(zhuǎn)。傾斜屬性的3種形式為：skew（x-angle，y-angle），沿x軸和y軸方向的2D傾斜轉(zhuǎn)換；skewX（angle），沿x軸方向的2D傾斜轉(zhuǎn)換；skewY（angle），沿y軸方向的2D傾斜轉(zhuǎn)換。例如：利用transition技術(shù)制作動畫，效果是當(dāng)鼠標(biāo)放到豎向的圓角矩形上時，圖形變?yōu)闄M向的圓角矩形，并且可以觀察到整個動畫的平滑過渡。動畫運(yùn)行效果如圖2所示。圖2動畫運(yùn)行效果案例技術(shù)分析：在CSS樣式中定義了一個叫“circle”的類，規(guī)定它的寬、高、背景、邊框、外邊距等樣式，指定它的動畫在1s內(nèi)完成寬和高的變化，動畫效果逐漸變慢。定義“circle”類的動作是當(dāng)鼠標(biāo)浮上時交換寬和高的值。在<body>中插入一個類名叫“circle”的<div>。代碼如下：<metacharset="utf-8"/><styletype="text/css">background-color:red;}}<divclass="circle"></div>3.2animation動畫技術(shù)由于transition動畫只能規(guī)定從一個屬性平滑過渡到另一個屬性，所以無法完成復(fù)雜的動畫編輯。圖3animation動畫設(shè)計(jì)的重要步驟animation動畫借助關(guān)鍵幀的設(shè)計(jì)，可以對一個元素設(shè)置多步驟的屬性變換，關(guān)鍵幀的位置用百分比表示。animation動畫設(shè)計(jì)的重要環(huán)節(jié)如圖3所示。關(guān)鍵幀規(guī)則：@keyframes動畫名稱｛0%｛樣式要求｝25%｛樣式要求｝50%｛樣式要求｝75%｛樣式要求｝100%｛樣式要求｝｝，通過關(guān)鍵幀來定義不同位置的動畫樣式；總時間規(guī)則：通過animation-duration屬性來指定動畫效果的持續(xù)時間，持續(xù)時間越長，動畫效果越慢；其他重要屬性和值規(guī)則：（1）animation-delay屬性指定動畫延遲播放的時間，延遲時間越長則動畫播放得就越晚；（2）nimation-direction屬性指定動畫播放的運(yùn)動方向，其中normal表示正常方向運(yùn)行動畫，reverse表示反方向運(yùn)行動畫，alternate表示正反方向交替運(yùn)行動畫，alternate-reverse表示反正方向交替運(yùn)行動畫；過渡效果規(guī)則：通過animation-timing-function屬性來指定動畫的過渡效果，取值有6種形式：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier；循環(huán)次數(shù)規(guī)則：通過animation-iteration-count屬性設(shè)置動畫是無限循環(huán)播放還是指定播放次數(shù)，取值有2種形式in?nite/<數(shù)值>。例如：制作一個沿規(guī)定路徑運(yùn)行的動畫，在運(yùn)行過程中圖形的形狀在不斷發(fā)生變化，運(yùn)行次數(shù)是無限循環(huán)的，動畫效果如圖4和圖5所示，體現(xiàn)出不同位置處的運(yùn)行效果。圖4動畫運(yùn)行效果1圖5動畫運(yùn)行效果2案例技術(shù)分析：在CSS樣式中定義一個叫“path”的類，規(guī)定它的寬、高、邊框、外邊距和倒角等樣式。又定義一個叫“box”的類，規(guī)定它的位置是相對定位，并且距左邊和上邊值都是0像素，定義它的動畫名稱是Move，在4s內(nèi)均勻完成一個周期的運(yùn)動，并無限次循環(huán)。定義第3個類中的“circle”類，規(guī)定它的寬、高、背景、邊框、倒角、透明度等樣式，定義它的動畫名稱是State，在5s內(nèi)均勻完成形狀變化，并無限次循環(huán)。定義2個動畫Move和State：State動畫有2個關(guān)鍵幀，在50%處交換寬和高的值，100%處恢復(fù)原來的寬和高；Move動畫有4個關(guān)鍵幀，分別在25%、50%、75%、100%處規(guī)定圖形的位置。最后在<body>中分別插入嵌套3個<div>類名是“path”，“box”，“circle”，完成動畫制作。代碼如下：<metacharset="utf-8"/><styletype="text/css">}position:relative;}background-color:#17A05D;transform:translate(-50%,-50%);opacity:0.7;}}}4CSS32D、3D動畫效果與控制4.1動畫效果CSS3的出現(xiàn)，為網(wǎng)頁增添了不少動畫元素，并且更加容易實(shí)現(xiàn)交互，在過去需要依賴于Flash和JavaScript，現(xiàn)在基本依靠CSS3就可以做到[3]。CSS中從一種樣式逐漸變化到另一種樣式就稱為過渡（transition），利用transition屬性再加上-webkit-私有前綴[4]，有了私有前綴-webkit-就可以在Android和IOS跨平臺APP開發(fā)中使用，很容易就實(shí)現(xiàn)了相應(yīng)的功能。例如：(1)div{width:100px;height:100px;background:blue;-webkit-transition:width2s;}//設(shè)置了矩形框?qū)挾茸兓瘯r間為2s。(2)div:hover{width:300px;}//鼠標(biāo)放上去后矩形框?qū)挾戎饾u延伸到300px，過渡時間為2s。CSS32D動畫轉(zhuǎn)換可以對元素進(jìn)行平移（:translate）、旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）等，例如：(3)-webkit-transform:translate(50px,100px);//水平向右偏移50像素，垂直向下偏移100像素。(4)-webkit-transform:rotate(60deg);//圍繞中心點(diǎn)順時針旋轉(zhuǎn)60度。(5)-webkit-transform:scale(0.5,0.5);//寬度和高端縮小為原來的一半。(6)-webkit-transform:skew(10deg,10deg);//相對于X軸和Y軸傾斜10度。相對2D動畫，3D動畫其實(shí)就是讓元素圍繞X軸、Y軸進(jìn)行旋轉(zhuǎn)，X軸旋轉(zhuǎn)（rotateX）與Y軸旋轉(zhuǎn)（rotateY），例如：(7)-webkit-transform:rotateX(60deg);//圍繞X軸順時針旋轉(zhuǎn)60度，因?yàn)槭钦龜?shù)，所以是順時針，反之就是逆時針。(8)-webkit-transform:rotate(60deg);//圍繞Y軸順時針旋轉(zhuǎn)60度，因?yàn)槭钦龜?shù)，所以是順時針，反之就是逆時針。4.2動畫控制CSS3除了過渡（transition）、變換（transform）等特效，為了更好地進(jìn)行動畫控制還提供了很重要的動畫控制屬性animation，從而可以來控制更加復(fù)雜的動畫效果，例如控制動畫播放、暫停、次數(shù)等。-webkit-animation:nameduraitiontiming—funcationdelayiteration—countdirection/*name：用@keyframes動畫規(guī)則名duraiton：動畫花費(fèi)時間timing-function：動畫速度曲線delay：動畫延遲時間iteration-count：動畫播放次數(shù)direction：動畫逆向播放*/@-webkit-keyframes動畫規(guī)則名{from{/*CSS屬性設(shè)置*/}to{/*CSS屬性設(shè)置*/}}//設(shè)置起始和終止的動畫幀5結(jié)論CSS3作為CSS技術(shù)的最新升級版本，新增了很多的特性，很多以前需要使用圖片和腳本來實(shí)現(xiàn)的動畫，現(xiàn)在使用CSS3只需幾行代碼就能實(shí)現(xiàn)。把我們從大量的繪圖、切圖和優(yōu)化圖片的工作中解放出來，我們在制作動畫時不需要再去尋找合適的腳本插件并修改以適配網(wǎng)站特效。CSS3技術(shù)讓網(wǎng)頁結(jié)構(gòu)變得更加簡單、清晰、明了，可以提高開發(fā)者的工作效率、減少開發(fā)時間、降低開發(fā)成本。同時CSS3動畫技術(shù)也有利于打造更好的用戶體驗(yàn)，使Web應(yīng)用的界面進(jìn)入一個全新階段。參考文獻(xiàn)[1]李曉斌.HTML5+CSS3+jQueryMobile移動網(wǎng)站與APP開發(fā)實(shí)戰(zhàn)[M].北京:人民郵電出版社,2018:6.[2]李維旺.基于網(wǎng)頁重構(gòu)的網(wǎng)絡(luò)用戶體驗(yàn)優(yōu)化研究與實(shí)現(xiàn)[D].電子科技大學(xué),2018.[3]陸郁.探析CSS技術(shù)在網(wǎng)頁制作中的應(yīng)用與代碼優(yōu)化[J].科技風(fēng),2019(01):110.[4]李微.HTML5+CSS3在網(wǎng)頁設(shè)計(jì)中的特性及優(yōu)勢[J].信息與電腦(理論版),2018(22):13-15.[5]張靜.CSS技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[J].無線互聯(lián)科技,2018,15(15):141-142.[6]高春燕.HTML5和CSS3.

溫馨提示

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

評論

0/150

提交評論