Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)14過渡與變形屬性課件

1、任務(wù)14 過渡與變形屬性第五單元 盒子模型第1頁，共14頁。學(xué)習(xí)目標(biāo)變形（transform）屬性過渡（transition）屬性掌握第2頁，共14頁。任務(wù)目標(biāo)實(shí)戰(zhàn)演練制作產(chǎn)品展示頁強(qiáng)化訓(xùn)練制作商品評論頁第3頁，共14頁。知識準(zhǔn)備1. 過渡（transition）屬性過渡（transition）屬性：平滑地改變一個元素的CSS值，使得元素從一個樣式逐漸過渡到另一個樣式。必須要規(guī)定兩項(xiàng)內(nèi)容：（1）應(yīng)用過渡效果的CSS屬性名稱。（2）過渡效果所用的時長。語法規(guī)則： transition：property duration timing-function delay；第4頁，共14頁。知識準(zhǔn)備屬性含

2、義取值說明transition-property指定應(yīng)用過渡效果的CSS屬性的名稱none沒有屬性會獲得過渡效果。all默認(rèn)值，所有屬性都將獲得過渡效果。property定義應(yīng)用過渡效果的CSS屬性名稱列表，列表以逗號分隔。transition-duration定義過渡效果所需花費(fèi)的時間time值規(guī)定完成過渡效果需要花費(fèi)的時間（以秒或毫秒計）。默認(rèn)值是 0，意味著不會有效果。transition-timing-function指定過渡效果的時間曲線linear規(guī)定以相同速度開始至結(jié)束的過渡效果（等于cubic-bezier(0,0,1,1)）。ease規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡

3、效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。ease-out規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。ease-in-out規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中定義自己的值?？赡艿闹凳?至1之間的數(shù)值。transition-delay定義過渡效果開始之前的等待時間time值指定秒或毫秒數(shù)，默認(rèn)值是0。

4、第5頁，共14頁。 .box width: 60px; height: 60px; border: 70px solid #0F0; transition: 3s; /*transition屬性寫在初始狀態(tài)的樣式中*/ .box:hover border-radius: 50%; 知識準(zhǔn)備示例：過渡屬性 border-color:#F00; /*邊框顏色為紅色*/第6頁，共14頁。知識準(zhǔn)備2. 變形（transform）屬性變形（transform）屬性：可以對元素進(jìn)行旋轉(zhuǎn)、縮放、移動或傾斜，且支持2D和3D轉(zhuǎn)換。語法規(guī)則： transform：none | transform-functio

5、ns；第7頁，共14頁。知識準(zhǔn)備transform-functions的常用2D轉(zhuǎn)換函數(shù)函數(shù)名含義參數(shù)說明matrix(n,n,n,n,n,n)使用六個值的矩陣使用6個值表示變形。translate(x,y)沿著X和Y軸移動元素X表示左右方向，Y表示上下方向，向左和向上為負(fù)數(shù)，反之為正數(shù)。translateX(n)沿著X軸移動元素translateY(n)沿著Y軸移動元素scale(x,y)改變元素的寬度和高度值表示縮放比例，取值可以是正數(shù)、負(fù)數(shù)和小數(shù)。scaleX(n)改變元素的寬度scaleY(n)改變元素的高度rotate(angle)旋轉(zhuǎn)元素angle規(guī)定旋轉(zhuǎn)角度。skew(x-ang

6、le,y-angle)沿著X和Y軸傾斜元素angle規(guī)定傾斜角度。skewX(angle)沿著X軸傾斜元素skewY(angle)沿著Y軸傾斜元素第8頁，共14頁。 body margin: 30px; background-color: #E9E9E9; font-family: 微軟雅黑; div width: 294px; padding: 10px 10px 20px 10px; border: 1px solid #BFBFBF; background-color: white; box-shadow: 2px 2px 3px #aaaaaa; .rotate_left float:

7、 left; transform: rotate(7deg); /*順時針旋轉(zhuǎn)7度*/ .rotate_right float: left; transform: rotate(-8deg); /*逆時針旋轉(zhuǎn)8度*/ 知識準(zhǔn)備示例：變形屬性 上海鮮花港的郁金香，花名：Ballade Dream。 2010年上海世博會，中國館。 第9頁，共14頁。實(shí)戰(zhàn)演練 案例描述：設(shè)計并制作產(chǎn)品展示頁，網(wǎng)頁效果如下圖1所示。當(dāng)光標(biāo)懸停在產(chǎn)品模塊上時，出現(xiàn)如圖2所示的效果。制作產(chǎn)品展示頁圖1圖2第10頁，共14頁。強(qiáng)化訓(xùn)練 案例描述：設(shè)計并制作商品評論網(wǎng)頁，網(wǎng)頁效果如下圖1所示。當(dāng)光標(biāo)懸停在商品模塊上時，出現(xiàn)如圖2所示的效果。制作商品評論頁圖1圖2第11頁，共14頁。任務(wù)小結(jié)0102過渡（transition）屬性變形（transform