Web前端開發(fā)案例教程第10章課件

1、第10章 CSS3動畫德才兼?zhèn)?知行合一 掌握通過transition屬性生成過渡動畫的方法； 掌握通過transition屬性生成2D和3D變形的方法； 掌握通過animation屬性創(chuàng)建關(guān)鍵幀生成動畫的方法。動畫屬性2德才兼?zhèn)?知行合一10.110.210.3過渡屬性第10章 CSS3動畫變形屬性10.4案例10.1 過渡屬性3德才兼?zhèn)?知行合一第10章 CSS3動畫 10.1 過渡屬性4德才兼?zhèn)?知行合一CSS3提供了強大的過渡屬性，使元素從一種樣式轉(zhuǎn)變?yōu)榱硪环N樣式時添加效果，如顏色和形狀的變換等。過渡屬性包含一系列屬性，主要包括transition-property、transitio

2、n-duration、transition-timing-function、transition-delay。下面通過表10-1列出這些屬性的基本語法及屬性值。 10.1 過渡屬性5德才兼?zhèn)?知行合一表10-1 過渡屬性屬性名作用屬性值 描述transition-property指定應(yīng)用過渡效果的CSS屬性名稱none沒有屬性會獲得過渡效果all所有屬性都將獲得過渡效果property定義應(yīng)用過渡效果的CSS屬性名稱，多個名稱之間以逗號分隔transition-duration定義過渡效果花費的時間time默認為0，常用單位是秒（s）或毫秒（ms）transition-timing-funct

3、ion定義過渡效果的速度曲線ease平滑過渡linear線性過渡ease-in由慢到快ease-out由快到慢ease-in-out由慢到快再到慢cubic-bezier特殊的立方貝塞爾曲線效果transition-delay定義過渡效果延遲時間time默認值為0，常用單位是秒（s）或毫秒（ms）transition綜合設(shè)置過渡的所有屬性值property durationtiming-functiondelay按照各屬性順序一次設(shè)置四個參數(shù)值，屬性順序不能顛倒10.2 變形屬性6德才兼?zhèn)?知行合一第10章 CSS3動畫 7德才兼?zhèn)?知行合一 10.2 變形屬性CSS3中，transform屬

4、性可以實現(xiàn)對元素的變形效果，如移動、傾斜、縮放以及翻轉(zhuǎn)等。通過transform屬性的變形函數(shù)能對元素進行2D或3D變形。8德才兼?zhèn)?知行合一 10.2 變形屬性常用的四種2D變形語法格式。屬性名值作用 描述transformtranslate(X,Y)基于X和Y坐標(biāo)平移元素X表示水平移動的距離，Y表示垂直移動的距離scale(n1,n2)放大或縮小元素n1和n2表示基于元素的寬度和高度進行放大或縮小。大于1時為放大，小于1時縮小元素。第二個參數(shù)省略時，等于第一個參數(shù)值skew(angle,angle)傾斜元素兩個angle分別表示在X軸和Y軸上傾斜的角度rotate(angle)旋轉(zhuǎn)元素an

5、gle表示旋轉(zhuǎn)的角度，正數(shù)表示順時針旋轉(zhuǎn)，負數(shù)表示逆時針旋轉(zhuǎn)表10-2 2D變形屬性及設(shè)置9德才兼?zhèn)?知行合一 10.2 變形屬性3D變形語法格式。表10-3 3D變形屬性及設(shè)置屬性名值 描述transformtranslate3d(x,y,z)定義 3D變形translateX(x)定義 3D 變形，僅使用用于 X 軸的值translateY(y)定義 3D 變形，僅使用用于 Y 軸的值translateZ(z)定義 3D 變形，僅使用用于 Z 軸的值scale3d(x,y,z)定義 3D 縮放變形scaleX(x)定義 3D 縮放變形，通過給定一個 X 軸的值scaleY(y)定義 3D

6、縮放變形，通過給定一個 Y 軸的值scaleZ(z)定義 3D 縮放變形，通過給定一個 Z 軸的值rotate3d(x,y,z,angle)定義 3D 旋轉(zhuǎn)rotateX(angle)定義沿 X 軸的 3D 旋轉(zhuǎn)rotateY(angle)定義沿 Y 軸的 3D 旋轉(zhuǎn)rotateZ(angle)定義沿 Z 軸的 3D 旋轉(zhuǎn)perspective(n)定義 3D 變形元素的透視視圖10德才兼?zhèn)?知行合一 10.2 變形屬性另外，在CSS3中還包含了一些其它變形的屬性，通過這些屬性可以設(shè)置不同的變形效果，具體如表10-4所示。表10-4 變形的其它屬性屬性名 描述transform-origin允

7、許改變被轉(zhuǎn)換元素的位置transform-style規(guī)定被嵌套元素如何在3D空間中顯示perspective規(guī)定3D元素的透視效果perspective-origin規(guī)定3D元素的底部位置backface-visibility定義元素在不面對屏幕時是否可見10.3 動畫屬性11德才兼?zhèn)?知行合一第10章 CSS3動畫12德才兼?zhèn)?知行合一CSS3除了支持過渡和變形動畫外，還可以通過animation屬性創(chuàng)建幀動畫，從而實現(xiàn)更為復(fù)雜的動畫效果。animation屬性與transition屬性類似，都是通過改變元素的屬性值來實現(xiàn)動畫效果的。它們的區(qū)別在于，使用transition屬性時只能通過指定

8、屬性的開始值與結(jié)束值，然后在兩個屬性值之間進行平滑過渡的方式來實現(xiàn)動畫效果，因此不能實現(xiàn)比較復(fù)雜的動畫；而animation屬性則通過定義多個關(guān)鍵幀以及定義每個關(guān)鍵幀中元素的屬性值來實現(xiàn)更為復(fù)雜的動畫效果。 10.3 動畫屬性13德才兼?zhèn)?知行合一 10.3 動畫屬性1、定義關(guān)鍵幀例如，下面的代碼定義了關(guān)鍵幀，共5幀，每幀中設(shè)置left和top屬性，讓它們的值改變，產(chǎn)生動畫。keyframes ball 0% left:0;top:0; 25% left:200px;top:0; 50% left:200px;top:200px; 75% left:0;top:200px; 100% left

9、:0;top:0;注意：定義關(guān)鍵幀，并不能產(chǎn)生動畫效果，還需要設(shè)置動畫屬性才行。溫馨提示14德才兼?zhèn)?知行合一 10.3 動畫屬性2、設(shè)置動畫效果動畫屬性包含一系列屬性，主要包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction等屬性。下面通過表10-5列出這些屬性的基本語法及屬性值。15德才兼?zhèn)?知行合一 10.3 動畫屬性表10-5 動畫屬性屬性名作用屬性值 描述animation-name指定要應(yīng)用

10、的動畫名稱none不應(yīng)用動畫keyframename指定應(yīng)用的動畫名稱，即keyframes定義的動畫名稱animation-duration定義動畫效果完成所需的時間time默認為0，常用單位是秒（s）或毫秒（ms）animation -timing-function定義動畫效果的速度曲線ease平滑過渡linear線性過渡ease-in由慢到快ease-out由快到慢ease-in-out由慢到快再到慢cubic-bezier特殊的立方貝塞爾曲線效果animation-delay定義動畫效果延遲時間time默認值為0，常用單位是秒（s）或毫秒（ms）animation-iteration-

11、count定義動畫的播放次數(shù)number播放次數(shù)infinite循環(huán)播放animation-direction定義動畫的播放方向normal默認值，動畫每次都向前播放alternate第偶數(shù)次向前播放，第奇數(shù)次反方向播放animation綜合設(shè)置動畫的所有屬性值namedurationtiming-functiondelayiteration-countdirection按照各屬性順序一次設(shè)置六個參數(shù)值，屬性順序不能顛倒10.4 案例16德才兼?zhèn)?知行合一第10章 CSS3動畫 10.4 案例17德才兼?zhèn)?知行合一10.4.1 圖片遮罩效果本案例使用CSS3 transition過渡屬性，使鼠

12、標(biāo)移動到圖片上時，下拉出遮罩的效果。如圖10-1和10-2所示。 10.4 案例18德才兼?zhèn)?知行合一10.4.2 圖片翻轉(zhuǎn)效果本案例使用CSS3 transition過渡屬性和transform變形屬性，使鼠標(biāo)移動到圖片上時，將圖片翻轉(zhuǎn)，顯示另一張圖片。如圖10-3和10-4所示。 10.4 案例19德才兼?zhèn)?知行合一10.4.3 照片墻效果本案例使用CSS3 transition過渡屬性和transform變形屬性制作照片墻效果，照片隨意擺放，當(dāng)鼠標(biāo)移動到每幅照片上時，將照片放大并垂直擺放，如圖10-5所示。 10.4 案例20德才兼?zhèn)?知行合一10.4.4 魔方效果本案例使用CSS3 transform變形屬性和animation動畫屬性制作旋轉(zhuǎn)的魔方效果，如圖10-6所示。21德才兼?zhèn)?知行合一本章小結(jié)21德才兼?zhèn)?知行合一transition過渡屬性transform變形屬性Animation動畫屬性通過本章的學(xué)習(xí)，可以學(xué)會綜合使用CSS3相關(guān)屬性制作在網(wǎng)頁中常用的動畫效果。22德才兼?zhèn)?知行合一實訓(xùn)101、利用transition過渡屬性創(chuàng)建圖片的切換效果，當(dāng)鼠標(biāo)移動圖片上時，逐漸過渡到另一張圖片，瀏覽效果如圖10-7和10-8所示。23德才兼?zhèn)?知行合一實訓(xùn)102、利用transition過渡屬性和tr