網頁設計基礎與實戰(zhàn)課件

上傳人：1*** IP屬地：廣東上傳時間：2025-02-16 格式：PPTX 頁數：75 大小：1.85MB 積分：30 舉報 版權申訴

已閱讀5頁，還剩70頁未讀，繼續(xù)免費閱讀

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

文檔簡介

第6章實現CSS3動畫6.1實現2Dtransform轉換6.2制作animation動畫6.3實現transition過渡和3D轉換了解CSS3動畫掌握CSS3中2D和3D的transform轉換掌握CSS3中的transition過渡掌握CSS3中的animation動畫引言在早期的Web設計中，通常依賴于Flash或JavaScript腳本來實現網頁中的動畫或特效。而CSS3提供了對動畫的強大支持，CSS3動畫包括transform轉換、animation動畫和transition過渡3大模塊，transform轉換可對網頁元素進行轉換操作，animation動畫可實現幀動畫的效果，transition過渡可實現CSS屬性的過渡變化，CSS3動畫的應用極大的帶動了網頁設計的靈活性。6.1實現2Dtransform轉換transform-origin屬性案例—清涼夏日主題宣傳rotate()旋轉translate()位移skew()傾斜scale()縮放6.1實現2Dtransform轉換6.1.1

transform-origin屬性在CSS3中，2D轉換是使用transform屬性來實現文字或圖像的各種轉換效果，如位移、旋轉、縮放、傾斜等轉換方法。這些轉換方法的使用，讓網頁效果更豐富，提升了用戶的體驗感。CSS3中位移、旋轉、縮放和傾斜都是默認以元素的中心原點進行轉換，可通過transform-origin屬性設置原點的位置，一旦中心原點改變，轉換的效果就會不一樣。transform-origin:x-axisy-axisz-axis;語法格式transform-origin屬性可用來設置transform轉換的原點位置。默認情況下，原點位置為元素的中心點。transform-origin屬性的語法格式如下所示。transform-origin屬性的語法格式如下。6.1實現2Dtransform轉換6.1.1transform-origin屬性transform-origin屬性可取值位置、百分數或px值，上述語法格式中，屬性值的具體說明如6.1所示。名稱說明值x-axisX軸原點坐標位置（left、center、right）/百分數/px值y-axisY軸原點坐標位置（top、center、bottom）/百分數/px值z-axisZ軸原點坐標數值如transform-origin:leftbottom;/transform-origin:50%30%;/transform-origin:20px40px;屬性值由于2D轉換沒有Z軸，transform-origin屬性可不設置Z軸的值。6.1實現2Dtransform轉換6.1.2translate()位移translate()位移是2D轉換的一種位移方法。translate()方法用于元素位移操作，在CSS3中，可以使用translate()方法將元素沿著水平方向（X軸）和垂直方向（Y軸）移動。translate()方法與relative相對定位相似，元素位置的改變不會影響到其他元素。transform:translate(x,y);或者分開寫transform:translateX(n);transform:translateY(n);語法格式translate()位移的語法格式如下。6.1實現2Dtransform轉換6.1.2translate()位移translate()位移可以改變元素的位置，以自身位置為基準進行移動，其值可為正數或負數，單位是px（像素）或%（百分比）。translate()位移方法可分為3種情況，具體說明如表所示。translate()方法說明translate(x,y)元素在水平方向（X軸）和垂直方向（Y軸）同時移動translateX(n)元素在水平方向（X軸）移動，n值為正數時，以自身位置為基準向右移動translateY(n)元素在垂直方向（Y軸）移動，n值為正數時，以自身位置為基準向下移動原心的改變對于位移沒有任何效果。6.1實現2Dtransform轉換6.1.3

rotate()旋轉rotate()旋轉是2D轉換的一種旋轉方法。rotate()方法用于元素旋轉操作，在CSS3中，可以使用rotate()方法將元素相對于原點進行旋轉。transform:rotate(度數);語法格式rotate()旋轉的語法格式如下。6.1實現2Dtransform轉換6.1.3

rotate()旋轉rotate()旋轉可根據給定的角度順時針或逆時針旋轉元素，其值可為正數或負數，單位是deg（角度單位）。角度值的取值范圍為0~360，當角度值為正數時，以順時針（默認值）方向進行旋轉；當角度值為負數時，以逆時針方向進行旋轉。rotate()旋轉方法采用就近旋轉目標角度的原則，當旋轉角度大于或等于180度時，會逆時針旋轉，如設置值為200deg，則會逆時針旋轉160deg。原心的改變會影響旋轉的效果，默認以中心原點進行旋轉。6.1實現2Dtransform轉換6.1.3

rotate()旋轉演示說明制作4個寬度和高度相同，自上而下排列的“盒子”。第1個和第3個“盒子”保持原始狀態(tài)，第2和第4個“盒子”，分別進行不同先后順序的位移和旋轉，演示其不同效果。<body><divid="late">參照元素1</div><divclass="late-1">先位移再旋轉</div><divid="rotate">參照元素2</div><divclass="rotate-1">先旋轉后位移</div></body>主體代碼

例6.1/*分別設置第2個和第4個元素*/.late-1{background-color:#b39cd2;transform:translateX(150px)rotate(50deg);/*先位移再旋轉*/-webkit-transform:translateX(150px)rotate(50deg);/*添加瀏覽器前綴，兼容瀏覽器*/}.rotate-1{background-color:#dda2b6;transform:rotate(50deg)translateX(150px);/*先旋轉再位移*/-webkit-transform:rotate(50deg)translateX(150px);}CSS代碼

例6.16.1實現2Dtransform轉換6.1.3

rotate()旋轉演示說明制作4個寬度和高度相同，自上而下排列的“盒子”。第1個和第3個“盒子”保持原始狀態(tài)，第2和第4個“盒子”，分別進行不同先后順序的位移和旋轉，演示其不同效果。在使用位移與旋轉實現轉換效果時，要注意兩者之間設置的先后順序，順序不一樣則效果也會不一樣。如果先進行位移，那么會在位移后的位置原地旋轉；如果先進行旋轉，那么會改變原點的位置，按照旋轉后的原心方向進行位移。6.1實現2Dtransform轉換6.1.4scale()縮放scale()縮放是2D轉換的一種縮放方法。scale()方法用于元素縮放操作，縮放指的是縮小和放大。在CSS3中，可以使用scale()方法將元素相對于原點進行縮放。transform:scale(w,h);或者分開寫transform:scaleX(w);transform:scaleY(h);語法格式scale()縮放的語法格式如下。6.1實現2Dtransform轉換6.1.4scale()縮放scale()縮放根據給定的寬度和高度參數增加或減少元素的大小，其值可為正數或負數。scale()縮放方法可分為3種情況，具體說明如表所示。scale()方法說明scale(w,h)元素在水平方向（X軸）和垂直方向（Y軸）同時縮放。當兩個參數值一樣時，可以只寫一個scaleX(w)元素在水平方向（X軸）縮放，w值為寬度縮放的比例值scaleY(h)元素在垂直方向（Y軸）移動，h值為高度縮放的比例值比例值為0~1時，表示縮小。比例值大于1時，表示放大。比例值為1時，處于默認狀態(tài)，既不放大，也不縮小。比例值為負數時，元素翻轉后再縮放。原心的改變會影響縮放的效果，默認以中心原點進行縮放，利用scale()方法進行縮放的元素不影響網頁的布局。6.1實現2Dtransform轉換6.1.5skew()傾斜skew()傾斜是2D轉換的一種傾斜方法。skew()方法用于元素傾斜操作，在CSS3中，可以使用skew()方法將元素傾斜顯示。transform:skew(x,y);或者分開寫transform:skewX(x);transform:skewY(y);語法格式skew()傾斜的語法格式如下。6.1實現2Dtransform轉換6.1.5skew()傾斜skew()傾斜方法使元素沿指定方向傾斜給定角度，角度值表示元素的傾斜角度，角度值可為正數或負數，單位是deg（角度單位）。skew()方法說明skew(x,y)元素在水平方向（X軸）和垂直方向（Y軸）同時傾斜，即元素沿水平方向（X軸）和垂直方向（Y軸）傾斜給定角度skewX(x)元素在水平方向（X軸）傾斜，即元素沿水平方向（X軸）傾斜給定角度skewY(y)元素在垂直方向（Y軸）傾斜，即元素沿垂直方向（Y軸）傾斜給定角度角度值的取值范圍為0~360，當角度值為正數時，以順時針（默認值）方向進行傾斜；當角度值為負數時，以逆時針方向進行傾斜。原心的改變會影響傾斜的效果，默認以中心原點進行傾斜。6.1實現2Dtransform轉換6.1.5skew()傾斜演示說明制作4個寬度和高度相同，自上而下排列的“盒子”。第1個和第3個“盒子”保持原始狀態(tài)，第2個“盒子”改變原心的位置進行縮放，第4個“盒子”改變原心的位置進行傾斜，演示其不同效果。<body><divid="form"><divid="scale">縮放參照元素1</div><divclass="scale-1">縮放元素</div><divid="skew">傾斜參照元素2</div><divclass="skew-1">傾斜元素</div></div></body>主體代碼

例6.2/*分別設置第2個和第4個元素*/.scale-1{transform-origin:rightbottom;/*改變元素原心位置*/background-color:#ffe4c6;transform:scale(0.8);/*縮小元素*/-webkit-transform:scale(0.8);/*添加瀏覽器前綴，兼容瀏覽器*/}.skew-1{transform-origin:rightbottom;/*改變元素原心位置*/background-color:#dda2b6;transform:skewX(50deg);/*傾斜元素*/-webkit-transform:skewX(50deg);}CSS代碼

例6.26.1實現2Dtransform轉換6.1.5skew()傾斜演示說明制作4個寬度和高度相同，自上而下排列的“盒子”。第1個和第3個“盒子”保持原始狀態(tài)，第2個“盒子”改變原心的位置進行縮放，第4個“盒子”改變原心的位置進行傾斜，演示其不同效果。6.1實現2Dtransform轉換6.1.6案例-清涼夏日主題宣傳本實例是一個關于清涼夏日的主題宣傳頁面。該頁面主要由<div>塊元素、<img>圖像標簽、<h3>標題標簽和<p>段落標簽構成，清涼夏日主題宣傳頁面結構簡圖如圖6.3所示。<head><title>清涼夏日主題宣傳</title>

<linktype="text/css"rel="stylesheet"href="theme.css"></head><body><divid="summer">

<divclass="header"><imgclass="bg"src="../image/theme.jpg"alt></div>

<divid="main"class="clearfix">

<divid="feature-1">

<divclass="ficon-1"><imgclass="img1"src="../image/sun.png"alt></div>

<divclass="details-1"><h3class="t1">天氣</h3><p>夏天是一個炎熱的季節(jié)，晴空萬里，太陽透過密密層層的葉子，圓影照射在地上，把地面烤得滾燙滾燙的。走在路上，迎面的風似熱浪撲來，天氣熱得像個蒸籠。</p></div></div>

</div></div></body>代碼實現6.1實現2Dtransform轉換6.1.6案例-清涼夏日主題宣傳主體代碼

例6.3/*使用偽元素清除浮動*/.clearfix::after{content:"";display:block;clear:both;}/*設置特色模塊1和特色模塊2左浮動*/#feature-1,#feature-2{

float:left;}/*使用空標簽，清除特色模塊1和特色模塊2左浮動帶來的影響*/.clear{clear:both;}/*設置特色模塊3和特色模塊4左浮動*/#feature-3,#feature-4{

float:left;}/*統一設置4個特色模塊*/#feature-1,#feature-2,#feature-3,#feature-4{

position:relative;/*設置相對定位*/}/*統一設置4個特色模塊中的左部圖標*/.ficon-1img,.ficon-2img,.ficon-3img,.ficon-4img{position:absolute;/*設置絕對定位*/left:15px;/*設置偏移位置*/top:15px;}代碼實現6.1實現2Dtransform轉換6.1.6案例-清涼夏日主題宣傳CSS部分代碼

例6.3/*統一設置4個特色模塊中的特色詳情部分*/.details-1,.details-2,.details-3,.details-4{width:250px;

/*設置左外邊距和上外邊距*/margin-left:90px;margin-top:12px;}/*鼠標放至<header>頭部標簽內容上時，設置背景圖片*/.header:hover.bg{

transform:scale(0.95);/*背景圖片縮小0.95倍*/}/*鼠標放至“ficon-1”<div>塊標簽內容上時，設置內部圖片*/.ficon-1:hover.img1{

transform-origin:lefttop;/*以左上角為原心進行轉換*/transform:scale(1.1)rotate(30deg);/*圖片先放大1.1倍，再順時針旋轉30度*/}/*鼠標放至“ficon-2”<div>塊標簽內容上時，設置內部圖片*/.ficon-2:hover.img2{

transform-origin:rightbottom;/*以右下角為原心進行轉換*/transform:scale(1.1)rotate(-30deg);/*圖片先放大1.1倍，再逆時針旋轉30度*/}/*鼠標放至“details-1”<div>塊標簽內容上時，設置內部文字標題*/#feature-1:hover.t1{

transform:translate(102px);/*文字標題向右位移102px*/}6.1實現2Dtransform轉換6.1.6案例-清涼夏日主題宣傳代碼實現在上述CSS代碼中，在設置頁面主體部分的轉換效果時，首先，統一為4個特色模塊設置相對定位，再統一為4個特色模塊中的左部圖標設置絕對定位，使用位置屬性設置圖標的具體位置，然后統一設置右部的特色詳情介紹。接下來就是具體實現元素轉換效果。當鼠標放至<header>頭部標簽內容上時，設置背景圖片縮小0.95倍，當鼠標分別放至4個特色模塊中的左部圖標時，可改變原點位置，設置圖片先放大1.1倍，再以不同方向旋轉30度，當鼠標分別放至特色詳情介紹的內容上時，設置文字標題向右位移102px。本節(jié)小結本節(jié)內容主要講解了設置transform轉換原點位置的transform-origin屬性，以及4種實現轉換效果的translate()位移、rotate()旋轉、scale()縮放和skew()傾斜方法。通過本節(jié)的學習，希望讀者可以了解CSS動畫中的4種轉換效果，以及掌握其使用方法。6.2制作animation動畫@keyframes規(guī)則案例—無縫輪播圖動畫瀏覽器前綴animation屬性6.2制作animation動畫隨著前端技術的不斷升級，在網頁上實現動畫效果的方式隨之增加。其中，CSS3的animation屬性可直接實現動畫效果，可以取代許多網頁的動畫圖像和Flash動畫，以及JavaScript實現的效果。animation動畫不需要觸發(fā)任何事件，就可以顯式的隨時間變化來改變元素的CSS屬性，從而達到動畫效果。animation動畫主要由keyframes關鍵幀、animation屬性和CSS樣式屬性3個部分組成，資源占用少，不僅減少內存空間，還使網頁更具有靈動性。6.2制作animation動畫@keyframes規(guī)則用于創(chuàng)建動畫，在@keyframes中規(guī)定某項CSS樣式，就能創(chuàng)建由當前樣式逐漸改為新樣式的動畫效果。在動畫過程中，可以多次更改CSS樣式的設定。動畫過程變化的發(fā)生有2種設置方式，1種是使用關鍵字“from”和“to”，另1種是使用百分比。在創(chuàng)建動畫時，通常以百分比來規(guī)定變化發(fā)生的時間，0％是開頭動畫，100％是結束動畫，其中0%對應的是from，100%對應的是to。6.2.1

@keyframes規(guī)則設置方式6.2制作animation動畫6.2.1

@keyframes規(guī)則@keyframes規(guī)則的基本語法格式如下所示。語法格式@keyframes動畫名稱{from{CSS樣式}to{CSS樣式}}或者在一個@keyframes規(guī)則中可以由多個百分比構成的，即在“0%”到“100%”之間創(chuàng)建多個百分比，為每個百分比中的動畫效果元素添加上不同的CSS樣式，從而達到一種不斷變化的效果，使動畫效果呈現得更細膩。@keyframes動畫名稱{0%{CSS樣式}......100%{CSS樣式}}6.2制作animation動畫animation屬性通過定義多個關鍵幀以及定義每個關鍵幀中的元素屬性來實現復雜的動畫效果。animation屬性是一個簡寫屬性，主要包含animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state這8個子屬性。6.2.2

animation屬性6.2制作animation動畫animation-name屬性表示動畫的名稱，也是需要綁定到選擇器的keyframes名稱，可以通過@keyframes關鍵幀樣式來找到對應的動畫名稱。6.2.2

animation屬性animation-name屬性animation-name:keyframename|none;語法格式animation-name屬性的語法格式如下。6.2制作animation動畫animation-duration屬性表示動畫的持續(xù)時間，單位可以設置成s（秒）或ms（毫秒）。6.2.2

animation屬性animation-duration屬性animation-duration:time;語法格式animation-duration屬性的語法格式如下。animation-duration屬性的默認值是0，這意味著沒有動畫效果，因此必須設置動畫的持續(xù)時間。6.2制作animation動畫animation-timing-function屬性表示動畫的速度曲線，指定動畫將如何完成一個周期。6.2.2

animation屬性animation-timing-function屬性animation-timing-function:value;語法格式animation-timing-function屬性的語法格式如下。6.2制作animation動畫animation-timing-function屬性值的具體說明如表所示。6.2.2

animation屬性animation-timing-function屬性屬性值說明ease默認值。動畫以低速開始，然后加快，在結束前變慢linear勻速。動畫從頭到尾的速度是相同的ease-in動畫以低速開始ease-out動畫以低速結束ease-in-out動畫以低速開始和結束6.2制作animation動畫續(xù)表。6.2.2

animation屬性animation-timing-function屬性屬性值說明cubic-bezier(n,n,n,n)在cubic-bezier函數中自己的值?？赡艿闹凳菑?~1的數值。step-start在變化過程中，都是以下一幀的顯示效果來填充間隔動畫step-end在變化過程中，都是以上一幀的顯示效果來填充間隔動畫steps()可傳入兩個參數，第一個是大于0的整數，將動畫等分成指定數目的小間隔動畫，根據第二個參數來決定顯示效果。第二個參數設置后和step-start，step-end同義，在分成的小間隔動畫中判斷顯示效果。animation屬性提供了cubic-bezier值，也就是貝塞爾曲線。貝塞爾曲線是應用于二維圖形應用程序的數學曲線，可以通過（貝塞爾官網）來獲取想要設置的樣式。6.2制作animation動畫animation-delay屬性表示執(zhí)行動畫效果的延遲時間，默認值為0，單位是s（秒）或ms（毫秒）。6.2.2

animation屬性animation-delay屬性animation-delay:time;語法格式animation-delay屬性的語法格式如下。動畫延遲時間的數值可以是負數，動畫效果會從該時間點開始，之前的動作不執(zhí)行。例如，將屬性值設置為-2s時，動畫會馬上開始，直接跳過前2秒進入動畫，即前2秒的動畫不執(zhí)行。6.2制作animation動畫animation-iteration-count屬性表示動畫的執(zhí)行次數。6.2.2

animation屬性animation-iteration-count屬性animation-iteration-count:number|infinite;語法格式animation-iteration-count屬性的語法格式如下。animation-iteration-count屬性有2個屬性值。number為一個數值，定義應該播放多少次動畫。infinite為指定動畫應該播放無限次，即動畫執(zhí)行無限次。6.2制作animation動畫animation-direction屬性表示是否應該輪流反向播放動畫。6.2.2

animation屬性animation-direction屬性animation-direction:normal|reverse|alternate|alternate-reverse;語法格式animation-direction屬性的語法格式如下。6.2制作animation動畫animation-direction屬性值的具體說明如表所示。6.2.2

animation屬性animation-direction屬性屬性值說明normal默認值。動畫按正常播放reverse動畫反向播放alternate動畫在奇數次（1、3、5…）正向播放，在偶數次（2、4、6…）反向播放alternate-reverse動畫在奇數次（1、3、5…）反向播放，在偶數次（2、4、6…）正向播放值得注意的是，如果動畫被設置為只播放1次，則該屬性將不起作用。動畫循環(huán)播放時，每次都是從結束狀態(tài)跳回到起始狀態(tài)，再開始播放，而animation-direction屬性可以重寫該行為。6.2制作animation動畫animation-fill-mode屬性可控制動畫停止位置。在正常情況下，動畫結束后會回到初始狀態(tài)，可通過animation-fill-mode屬性設置動畫結束時的停止位置。6.2.2

animation屬性animation-fill-mode屬性animation-fill-mode:none|forwards|backwards|both;語法格式animation-fill-mode屬性的語法格式如下。6.2制作animation動畫animation-fill-mode屬性值的具體說明如表所示。6.2.2

animation屬性animation-fill-mode屬性屬性值說明none默認值。動畫在執(zhí)行之前和之后不會應用任何樣式到目標元素forwards動畫停止在結束狀態(tài)，即停止在最后一幀backwards動畫回到初始狀態(tài)both動畫遵循forwards和backwards的規(guī)則。也就是說，animation-fill-mode相當于同時配置了backwards和forwards，意味著在動畫等待和動畫結束狀態(tài)，元素將分別應用動畫第一幀和最后一幀的樣式animation-fill-mode屬性值設置為backwards時，要參考animation-direction屬性的取值。當animation-direction屬性值為“normal”或“alternate”時，回到初始狀態(tài)；當animation-direction屬性值為“reverse”或“alternate-reverse”時，停止在最后一幀。6.2制作animation動畫animation-play-state屬性定義動畫的播放狀態(tài)。6.2.2

animation屬性animation-play-state屬性animation-play-state:paused|running;語法格式animation-play-state屬性的語法格式如下。animation-play-state屬性有2個屬性值。paused表示暫停動畫；running表示播放動畫，為默認值。一般情況下是通過JavaScript方式控制動畫的暫停和播放。6.2制作animation動畫animation屬性的簡寫格式如下所示。6.2.2

animation屬性animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;簡寫格式值得注意的是，定義動畫時，必須定義動畫的名稱和動畫的持續(xù)時間。如果省略持續(xù)時間，則animation-duration屬性值默認為0，動畫將無法執(zhí)行。6.2制作animation動畫由于瀏覽器廠商眾多，一些新出現的CSS3屬性在不同的瀏覽器上會出現兼容問題。為了解決這一情況，可在這些CSS3屬性上加入瀏覽器引擎前綴，用來確保這種屬性只在特定的瀏覽器渲染引擎下才能識別和生效。常見的瀏覽前綴的具體說明如表所示。6.2.3

瀏覽器前綴屬性值內核前綴Chrome(谷歌瀏覽器)和Safari(蘋果瀏覽器)WebKit內核-webkit-Firefox(火狐瀏覽器)Gecko內核-moz-IE(IE瀏覽器)Trident內核-ms-Opera(歐朋瀏覽器)Presto內核-o-6.2制作animation動畫瀏覽器內核就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不同的瀏覽器內核對網頁編寫語法的解釋會有不同，因此同一網頁在不同的內核的瀏覽器里的渲染（顯示）效果也可能不同，這是網頁編寫者需要在不同內核的瀏覽器中測試網頁顯示效果的原因。IE10和Firefox瀏覽器（>=16版本）支持沒有前綴的animation屬性，Firefox瀏覽器（<16版本）使用-moz-前綴，由于現在Firefox瀏覽器的版本通常不低，Firefox瀏覽器可以直接使用沒有前綴的animation屬性，但是Chrome、Safari和Opera瀏覽器不支持，因此animation屬性需使用webkit前綴。6.2.3

瀏覽器前綴6.2制作animation動畫使用瀏覽器前綴示例如下。6.2.3

瀏覽器前綴@-webkit-keyframesmyAnim{0%{background:#f00;}50%{background:#0f0;}100%{background:yellowgreen;}}6.2制作animation動畫6.2.4案例-無縫輪播圖動畫本實例是一個關于清涼夏日主題背景的瀏覽動畫頁面。該頁面主要由<div>塊元素、<ul>無序列表、<span>內聯元素、<img>圖像標簽和<h3>標題標簽構成，頁面結構簡圖如圖所示。<head><metacharset="UTF-8"><title>無縫輪播圖動畫</title><linktype="text/css"rel="stylesheet"href="animation.css"></head><body><h3>清涼夏日主題瀏覽</h3><divid="cartoon"><ulclass="picture"><li><span>1</span><imgsrc="../image/summer-1.jpg"alt=""></li><li><span>2</span><imgsrc="../image/summer-2.jpg"alt=""></li><li><span>3</span><imgsrc="../image/summer-3.jpg"alt=""></li><li><span>4</span><imgsrc="../image/summer-4.jpg"alt=""></li><li><span>5</span><imgsrc="../image/summer-5.jpg"alt=""></li><li><span>6</span><imgsrc="../image/summer-6.jpg"alt=""></li></ul></div></body>代碼實現6.2制作animation動畫6.2.4案例-無縫輪播圖動畫主體代碼

例6.4/*設置外層容器*/#box{

width:650px;height:300px;margin:10pxauto;

overflow:hidden;/*隱藏溢出的內容部分*/}/*設置內層容器*/.picture{

width:3900px;height:300px;

list-style:none;/*取消項目標記*/}/*設置項目列表與圖片的寬度和高度相同*/.picture>li,img{width:650px;height:300px;}/*設置項目列表*/.picture>li{

float:left;/*向左浮動*/position:relative;/*設置相對定位*/animation:summer22sease2sinfinitealternate;/*設置動畫效果*/-webkit-animation:summer22sease2sinfinitealternate;/*添加瀏覽器前綴，兼容瀏覽器*/}代碼實現6.2制作animation動畫6.2.4案例-無縫輪播圖動畫CSS部分代碼

例6.4/*設置圖片中右下角的序號*/span{width:18px;height:18px;line-height:18px;text-align:center;color:#FF3300;display:inline-block;/*轉化為內聯塊元素*/border:1pxsolid#FF3300;/*設置邊框樣式*/border-radius:50%;/*設置圓角*/position:absolute;/*設置絕對定位*/right:70px;/*設置偏移位置*/bottom:20px;}/*使用@keyframes規(guī)則創(chuàng)建動畫*/@keyframessummer{0%{left:0}20%{left:-650px}45%{left:-1300px}60%{left:-1950px}80%{left:-2600px}100%{left:-3250px}}@-webkit-keyframessummer{0%{left:0}20%{left:-650px}45%{left:-1300px}60%{left:-1950px}80%{left:-2600px}100%{left:-3250px}}6.2制作animation動畫6.2.4案例-無縫輪播圖動畫代碼實現在上述CSS代碼中，首先，使用overflow屬性隱藏外層容器溢出的內容部分，再設置內層容器中的無序列表，使用float屬性將6個項目列表設置向左浮動，并添加相對定位，以及使用animation屬性設置動畫效果。然后設置背景圖片中的右下角序號，為<span>內聯元素添加絕對定位，使用位置屬性設置圖標的具體位置。最后使用@keyframes規(guī)則創(chuàng)建動畫，配合animation屬性實現動畫效果。本節(jié)小結本節(jié)內容主要講解了@keyframes規(guī)則創(chuàng)建動畫，animation屬性設置動畫具體實現效果，以及有關瀏覽器前綴的使用方法。通過本節(jié)的學習，希望讀者可以使用CSS3的animation屬性在網頁中添加動畫。6.3實現transition過渡和3D轉換transition屬性案例—旋轉夏日主題背景3Drotate()旋轉3D轉換屬性3D其他轉換6.3實現transition過渡和3D轉換CSS3的transition過渡屬性允許CSS的屬性值在一定的時間區(qū)間內平滑地過渡。這種效果可以在光標單擊、光標移過、獲得焦點或對元素任何改變中觸發(fā)，并平滑地以動畫效果改變CSS的屬性值。transition過渡屬性是一個簡寫屬性，主要包含transition-property、transition-duration、transition-timing-function和transition-delay這4個子屬性。6.3.1

transition屬性6.3

實現transition過渡和3D轉換transition-property屬性規(guī)定設置過渡效果的CSS屬性的名稱，也就是表明需要對元素的哪一個屬性進行過渡操作。6.3.1

transition屬性transition-property屬性transition-property:none|all|property;語法格式transition-property屬性的語法格式如下。6.3

實現transition過渡和3D轉換transition-property屬性值的具體說明如表所示。6.3.1

transition屬性transition-property屬性屬性值說明none表示沒有屬性獲得過渡效果all表示所有屬性獲得過渡效果property定義應用過渡效果的CSS屬性的名稱列表，列表以“，”（逗號）分隔6.3

實現transition過渡和3D轉換transition-duration屬性表示過渡的持續(xù)時間，單位可以設置成s（秒）或ms（毫秒）。6.3.1

transition屬性transition-duration屬性transition-duration:time;語法格式transition-duration屬性的語法格式如下。6.3

實現transition過渡和3D轉換transition-timing-function屬性表示過渡的速度曲線，指定過渡將如何完成一個周期。6.3.1

transition屬性transition-timing-function屬性transition-timing-function:value;語法格式transition-timing-function屬性的語法格式如下。transition-timing-function與animation-timing-function的動畫形式完全一樣，屬性的取值相同，默認情況下是ease形式。6.3

實現transition過渡和3D轉換transition-delay屬性表示執(zhí)行過渡效果的延遲時間，默認值為0，單位是s（秒）或ms（毫秒）。6.3.1

transition屬性transition-delay屬性transition-delay:time;語法格式transition-delay屬性的語法格式如下。過渡延遲時間的數值可以是正數或負數，transition-delay與animation-delay的效果完全一樣。6.3

實現transition過渡和3D轉換transition過渡和animation動畫都能在網頁上實現動態(tài)效果，但它們之間是存在差異的，具體有以下4點。6.3.1

transition屬性過渡效果與動畫效果的區(qū)別transition過渡需要事件觸發(fā)，無法在網頁加載時自動發(fā)生。animation動畫不需要事件觸發(fā)，可直接實現動畫效果。transition過渡是一次性的，不能重復發(fā)生，除非再次觸發(fā)。animation動畫能執(zhí)行無限次。transition過渡只有兩個狀態(tài)，即開始狀態(tài)和結束狀態(tài)，不能定義中間狀態(tài)。animation動畫可定義多個狀態(tài)。一條transition過渡規(guī)則，只能定義一個屬性的變化，不能涉及多個屬性。animation動畫能定義多個屬性的變化。6.3實現transition過渡和3D轉換CSS3的3D轉換功能與2D轉換功能類似，2D轉換元素可以在平面空間內進行位置或形狀的轉換，而3D轉換元素可以在三維空間（也就是立體空間）內進行位置或形狀的轉換，具有更豐富的視覺效果。3D即三維空間，是指在平面二維系中又加入了一個方向向量構成的空間系。3D指的是坐標軸的三個軸，即x軸、y軸、z軸，其中x表示左右空間，y表示上下空間，z表示前后空間，這樣就形成了視覺立體感。3D轉換主要有perspective、transform-style、perspective-origin和backface-visibility4個屬性。6.3.2

3D轉換屬性6.3

實現transition過渡和3D轉換perspective屬性規(guī)定3D元素的透視效果。perspective屬性可以簡單理解為視距，用來設置用戶和元素3D空間Z平面之間的距離。而其效應由自身的值來決定，值越小，用戶與3D空間Z平面距離越近，視覺效果更令人印象深刻；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果就很小。6.3.23D轉換屬性perspective屬性perspective:number|none;語法格式perspective屬性的語法格式如下。6.3

實現transition過渡和3D轉換當為元素定義perspective屬性時，其子元素會獲得透視效果，而不是元素本身。值得注意的是，perspective屬性只影響3D轉換元素。6.3.23D轉換屬性perspective屬性屬性值說明none默認值。與0相同，不設置透視number元素距離視圖的距離，單位為px（像素）perspective屬性值為none和像素值，具體說明如表所示。6.3

實現transition過渡和3D轉換transform-style屬性規(guī)定被嵌套元素如何在3D空間中顯示。6.3.23D轉換屬性transform-style屬性transform-style:flat|preserve-3d;語法格式transform-style屬性的語法格式如下。6.3

實現transition過渡和3D轉換transform-style屬性需要設置在父元素中，并且高于任何嵌套的變形元素。6.3.23D轉換屬性transform-style屬性屬性值說明flat表示所有子元素在2D平面呈現preserve-3d表示所有子元素在3D空間中呈現transform-style屬性值為flat和preserve-3d，具體說明如表所示。6.3

實現transition過渡和3D轉換perspective-origin屬性定義3D元素所基于的X軸和Y軸，即設置3D元素的基點位置，允許改變3D元素的底部位置。6.3.23D轉換屬性perspective-origin屬性perspective-origin:x-axisy-axis;語法格式perspective-origin屬性的語法格式如下。perspective-origin與transform-origin的屬性取值相似，可參考transform-origin的屬性值。值得注意的是，perspective-origin屬性必須定義在父元素上，需要與perspective屬性一同使用，以便將視點移至元素的中心以外位置。6.3

實現transition過渡和3D轉換backface-visibility屬性定義元素不面向屏幕時是否可見，即決定當元素旋轉后，背面是否可見。6.3.23D轉換屬性backface-visibility屬性backface-visibility:visible|hidden;語法格式backface-visibility屬性的語法格式如下。backface-visibility屬性有2個屬性值。visible表示背面是可見的；hidden表示背面是不可見的。6.3

實現transition過渡和3D轉換6.3.3

3Drotate()旋轉方法說明rotateX(a)元素以坐標軸X軸，從下往上旋轉。rotateX(a)函數功能等同于rotate3d(1,0,0,a)rotateY(a)元素以坐標軸Y軸，從左往右旋轉。rotateY(a)函數功能等同于rotate3d(0,1,0,a)rotateZ(a)元素以坐標軸中心為原點，順時針旋轉。rotateZ(a)函數功能等同于rotate3d(0,0,1,a)rotate3d(x,y,z,a)表示圍繞自定義旋轉軸進行旋轉3D轉換使用基于2D轉換的相同屬性，首先介紹3D的rotate()旋轉效果。CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()4個功能函數，這4種方法的具體說明如所示。6.3

實現transition過渡和3D轉換6.3.3

3Drotate()旋轉rotate3d(x,y,z,a)中的取值說明如下。x是一個0~1之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值。y是一個0~1之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值。z是一個0~1之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值。a是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，其值為負值，元素逆時針旋轉。6.3

實現transition過渡和3D轉換6.3.4

3D其他轉換3D位移可使元素在三維空間里進行移動，translateZ()位移和translate3d()位移的具體說明如表如表所示。x通常為像素值，表示元素在三維空間里沿X軸進行位移。y通常為像素值，表示元素在三維空間里沿Y軸進行位移。z通常為像素值，表示元素在三維空間里沿Z軸進行位移，視覺效果如同以坐標軸原點為基準，放大或縮小。3Dtranslate()位移方法說明translateZ()元素在坐標軸Z軸上進行位移，其效果等同于縮放translate3d(x,y,z)元素在三維空間里移動，使用三維向量坐標定義元素在每個方向的移動位置translate3d(x,y,z)中的取值說明如下。6.3

實現transition過渡和3D轉換6.3.4

3D其他轉換3D縮放主要有scaleZ()和scale3d()兩種方法。scaleZ()縮放和scale3d()縮放的具體說明如表如表所示。x為數值，表示元素在三維空間里以X軸為基準，Y軸方向放大或縮小，即左右放大或縮小。y為數值，表示元素在三維空間里以Y軸為基準，X軸方向放大或縮小，即上下放大或縮小。z為數值，沒有效果，看不出變化。3Dscale()縮放方法說明scaleZ()元素在Z軸上按比例縮放，默認值為1。沒有任何效果scale3d(x,y,z)元素在三維空間里縮放，按比例在坐標軸各方向上進行縮放scale3d(x,y,z)中的取值說明如下。scaleZ()和scale3d()函數單獨使用時沒有任何效果，需要配合其他的轉換方法一起使用才會有效果。6.3實現transition過渡和3D轉換6.3.5案例-旋轉夏日主題背景本實例是一個關于清涼夏日主題背景的3D旋轉頁面。該頁面主要由<div>塊元素、<ul>無序列表和<h3>標題標簽構成，頁面結構簡圖如圖所示。<head><metacharset="UTF-8"><title>旋轉夏日主題背景</title><linktype="text/css"rel="stylesheet"href="transition.css"></head><body><divid="rotate">

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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

網頁設計基礎與實戰(zhàn)課件

文檔簡介

溫馨提示

最新文檔

評論

網頁設計基礎與實戰(zhàn)課件

文檔簡介

溫馨提示

最新文檔

評論

相關文檔