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

下載本文檔

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

文檔簡(jiǎn)介

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論