任務(wù)9制作學(xué)院風(fēng)景墻

任務(wù)9制作學(xué)院風(fēng)景墻Web前端開發(fā)案例教程HTML5+CSS3項(xiàng)目式微課版為了追求更好的網(wǎng)頁瀏覽與交互體驗(yàn),用戶對網(wǎng)站的美觀性和交互性的要求越來越高。CSS3不僅可以實(shí)現(xiàn)頁面的基本樣式,還可以提供對動畫的強(qiáng)大支持,可以實(shí)現(xiàn)旋轉(zhuǎn)、縮放、移動和過渡等效果，提高用戶的體驗(yàn)。本任務(wù)的使用CSS3的過渡、變形等屬性制作照片墻的動畫效果。通過本任務(wù)的實(shí)現(xiàn)，掌握使用CSS3實(shí)現(xiàn)動畫效果的各種方法。

制作學(xué)院風(fēng)景墻任務(wù)9制作照片墻頁面，具體要求如下。（1）在頁面中放入六張圖片，圖片大小240px*240px。鼠標(biāo)指針移動到每張圖片上時(shí)，顯示不同的動畫效果。（2）鼠標(biāo)指針移動到第一張圖片上時(shí)，將圖片變?yōu)閳A形。（3）鼠標(biāo)指針移動到第二張圖片上時(shí)，逆時(shí)針旋轉(zhuǎn)60度。（4）鼠標(biāo)指針移動到第三張圖片上時(shí)，順時(shí)針旋轉(zhuǎn)360度。（5）鼠標(biāo)指針移動到第四張圖片上時(shí)，給照片添加陰影并且逆時(shí)針旋轉(zhuǎn)10度。（6）鼠標(biāo)指針移動到第五張圖片上時(shí)，產(chǎn)生3D變形、沿Y軸旋轉(zhuǎn)180度。（7）鼠標(biāo)指針移動到第六張圖片上時(shí)，將照片放大1.2倍。任務(wù)描述任務(wù)效果制作照片墻頁面，瀏覽效果如圖9-1所示。圖9-1學(xué)院照片墻知識點(diǎn)過渡屬性01變形屬性02

制作學(xué)院風(fēng)景墻任務(wù)9如果直接變化就如同兩張圖片直接相互轉(zhuǎn)換，不美觀。9.2.1過渡屬性為了能更好的體現(xiàn)出一個(gè)狀態(tài)向另一個(gè)狀態(tài)變化的過程。在制作照片墻時(shí)我們需要把圖片旋轉(zhuǎn)甚至變形。有什么好辦法嗎?9.2.1過渡屬性

這就好比我們讓塊元素由一種顏色漸變成另一種顏色的過程。我們需要體現(xiàn)出顏色漸變時(shí)的狀態(tài)。CSS3提供了強(qiáng)大的過渡屬性，在元素從一種樣式轉(zhuǎn)變?yōu)榱硪环N樣式時(shí)添加效果，如顏色和形狀的變換等。9.2.1過渡屬性過渡效果使用過渡屬性transition來定義，過渡屬性是一個(gè)復(fù)合屬性，它包含一系列子屬性，主要包括transition-property、transition-duration、transition-timing-function、transition-delay等。表10-1所示為過渡屬性的含義。屬性名作用屬性值描述transition-property指定應(yīng)用過渡效果的CSS屬性名稱none沒有屬性會獲得過渡效果all所有屬性都將獲得過渡效果property定義應(yīng)用過渡效果的CSS屬性名稱，多個(gè)名稱之間以逗號分隔transition-duration定義過渡效果花費(fèi)的時(shí)間time默認(rèn)為0，常用單位是秒（s）或毫秒（ms）transition-timing-function定義過渡效果的速度曲線Ease慢速開始，中間變快，最后慢速結(jié)束的過渡效果，默認(rèn)值Linear以相同速度開始至結(jié)束的過渡效果ease-in慢速開始，逐漸加快的過渡效果ease-out慢速結(jié)束的過渡效果ease-in-out慢速開始和結(jié)束的過渡效果cubic-bezier特殊的立方貝塞爾曲線效果，它的值在0-1之間transition-delay定義過渡效果延遲時(shí)間time默認(rèn)值為0，常用單位是秒（s）或毫秒（ms）transition綜合設(shè)置過渡的所有屬性值propertydurationtiming-functiondelay按照各屬性順序用一行代碼設(shè)置4個(gè)參數(shù)值，屬性順序不能顛倒9.2.1過渡屬性例9-1在HBuilderX中，新建空項(xiàng)目，項(xiàng)目名稱為chapter9，在項(xiàng)目內(nèi)新建網(wǎng)頁文件，使用transition的子屬性設(shè)置過渡效果，文件名為example01.html，代碼如下。9.2.1過渡屬性代碼中設(shè)置了應(yīng)用過渡效果的屬性、過渡效果花費(fèi)的時(shí)間、過渡方式和延遲時(shí)間，當(dāng)鼠標(biāo)指針經(jīng)過塊元素時(shí)，背景顏色產(chǎn)生過渡效果，如圖9-2和圖9-3所示。圖9-2鼠標(biāo)指針未經(jīng)過塊元素時(shí)的預(yù)覽效果

圖9-3鼠標(biāo)指針經(jīng)過塊元素時(shí)的預(yù)覽效果

9.2.1過渡屬性上述樣式代碼中，分別設(shè)置了transition-property、transition-duration、transition-timing-function和transition-delay屬性，為了簡化代碼，可使用transition屬性進(jìn)行綜合設(shè)置，只需一行代碼，代碼如下。使用transiton屬性設(shè)置過渡效果時(shí)，它的各個(gè)參數(shù)必須按照順序來定義，不能顛倒；第三個(gè)和第四個(gè)參數(shù)可以省略，省略時(shí)表示以ease方式過渡，過渡拖延時(shí)間為0。注意9.2.1過渡屬性例9-2在項(xiàng)目chapter9中再新建一個(gè)網(wǎng)頁文件，使用transition屬性設(shè)置塊元素的多種過渡效果，文件名為example02.html，代碼如下。代碼中設(shè)置了邊框、背景顏色、圓角半徑和盒子陰影的過渡效果，當(dāng)鼠標(biāo)指針經(jīng)過塊元素時(shí)，塊元素的邊框樣式、背景顏色、圓角半徑和陰影都產(chǎn)生了過渡效果。9.2.1過渡屬性圖9-4鼠標(biāo)指針未經(jīng)過塊元素時(shí)的預(yù)覽效果圖9-5鼠標(biāo)指針經(jīng)過塊元素時(shí)的預(yù)覽效果效果如圖9-4和圖9-5所示。例9-3在項(xiàng)目chapter9中再新建一個(gè)網(wǎng)頁文件，使用transition屬性設(shè)置圖像的過渡效果，文件名為example03.html，代碼如下。9.2.1過渡屬性代碼中設(shè)置了背景圖像、邊框和圓角半徑的過渡效果，當(dāng)鼠標(biāo)指針經(jīng)過塊元素時(shí)，塊元素的背景圖像、邊框和圓角半徑都產(chǎn)生了過渡效果。9.2.1過渡屬性效果如圖9-6和圖9-7所示。圖9-6鼠標(biāo)指針未經(jīng)過塊元素時(shí)的效果圖9-7鼠標(biāo)指針經(jīng)過塊元素時(shí)的效果9.2.1過渡屬性例9-4在項(xiàng)目chapter9中再新建一個(gè)網(wǎng)頁文件，使用transition屬性定義圖片遮罩效果，文件名為example04.html，代碼如下。結(jié)構(gòu)代碼中使用了<hgroup>標(biāo)記頁面結(jié)構(gòu)：9.2.1過渡屬性樣式定義：樣式代碼中使用了:nth-child()選擇器，用于選擇元素。上述代碼中使用transition過渡屬性，使鼠標(biāo)指針經(jīng)過圖片時(shí)，產(chǎn)生圖片遮罩效果，如圖9-8和圖9-9所示。圖9-8鼠標(biāo)指針未經(jīng)過圖片時(shí)的效果圖9-9鼠標(biāo)指針經(jīng)過圖片時(shí)的效果9.2.1過渡屬性9.2.2變形屬性CSS3中與動畫相關(guān)的第二個(gè)屬性是transform屬性，翻譯成中文是“改變、轉(zhuǎn)換”，它可以實(shí)現(xiàn)對元素的變形效果，如移動、傾斜、縮放以及翻轉(zhuǎn)等。通過transform屬性的變形函數(shù)能對元素進(jìn)行2D或3D變形。我們來學(xué)習(xí)2D變形。9.2.2變形屬性2D變形在CSS3中，2D變形主要包括平移、縮放、傾斜、旋轉(zhuǎn)、改變中心點(diǎn)5種變化效果。（1）translate(x,y)——平移translate(x,y)函數(shù)用于重新定義元素的坐標(biāo)，該函數(shù)的兩個(gè)參數(shù)分別定義元素的水平和垂直坐標(biāo)，參數(shù)值為像素值或者百分比，當(dāng)參數(shù)為負(fù)數(shù)時(shí)，表示反方向移動元素（向上和向左移動）。如果省略了第二個(gè)參數(shù)，則取默認(rèn)值0。也可以使用translateX(x)和translateY(y)分別設(shè)置這兩個(gè)參數(shù)。9.2.2變形屬性2D變形例9-5在項(xiàng)目chapter9中再新建一個(gè)網(wǎng)頁文件，使用translate(x,y)函數(shù)定義平移效果，文件名為example05.html，代碼如下。代碼中，通過translate()方法將第二個(gè)盒子水平向右移動100px，垂直向下移動30px9.2.2變形屬性2D變形網(wǎng)頁效果如圖9-10所示。圖9-10通過translate()方法實(shí)現(xiàn)平移9.2.2變形屬性2D變形（2）scale(x,y)——縮放scale(x,y)函數(shù)用于設(shè)置元素的縮放效果，該函數(shù)的兩個(gè)參數(shù)分別定義元素在水平和垂直方向的縮放倍數(shù)，參數(shù)值為大于1的正數(shù)、負(fù)數(shù)和大于0且小于1的小數(shù)，不需要加單位，其中大于1的正數(shù)用于放大元素，負(fù)數(shù)用于翻轉(zhuǎn)元素后，再縮放元素，大于0且小于1的小數(shù)用于縮小元素。如果第二個(gè)參數(shù)省略，則第二個(gè)參數(shù)默認(rèn)等于第一個(gè)參數(shù)。也可以使用scaleX(x)和scaleY(y)分別設(shè)置這兩個(gè)參數(shù)。9.2.2變形屬性2D變形例9-6在項(xiàng)目chapter9中再新建一個(gè)網(wǎng)頁文件，使用scale(x,y)函數(shù)定義縮放效果，文件名為example06.html，代碼如下。代碼中，通過scale()方法將第二個(gè)盒子放大，將第三個(gè)盒子縮小。9.2.2變形屬性2D變形網(wǎng)頁效果如圖9-11所示。圖9-11通過scale()方法實(shí)現(xiàn)縮放9.2.2變形屬性2D變形（3）skew(x,y)——傾斜skew(x,y)函數(shù)用于設(shè)置元素的傾斜效果，該函數(shù)的兩個(gè)參數(shù)分別定義元素在水平和垂直方向的傾斜角度，參數(shù)值為角度數(shù)值，單位為deg，取值為正數(shù)或者負(fù)數(shù)表示不同的傾斜方向。如果第二個(gè)參數(shù)省略，則第二個(gè)參數(shù)默認(rèn)為0。也可以使用skewX(x)和skewY(y)分別設(shè)置這兩個(gè)參數(shù)。9.2.2變形屬性2D變形例9-7在項(xiàng)目chapter10中再新建一個(gè)網(wǎng)頁文件，使用skew(x,y)函數(shù)定義傾斜效果，文件名為example07.html，代碼如下。代碼中，通過skew()方法將第二個(gè)盒子水平傾斜45度，垂直傾斜10度。9.2.2變形屬性2D變形（4）rotate(angle)——旋轉(zhuǎn)rotate(angle)函數(shù)用于設(shè)置元素的旋轉(zhuǎn)效果，參數(shù)值為角度數(shù)值，單位為deg，取值為正數(shù)或者負(fù)數(shù)，正數(shù)表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)。9.2.2變形屬性2D變形例9-7在項(xiàng)目chapter9中再新建一個(gè)網(wǎng)頁文件，使用rotate(x,y)函數(shù)定義旋轉(zhuǎn)效果，文件名為example07.html，代碼如下。代碼中，通過rotate()方法將第二個(gè)盒子旋轉(zhuǎn)45度。9.2.2變形屬性2D變形網(wǎng)頁效果如圖9-12所示。圖9-12通過rotate()方法實(shí)現(xiàn)旋轉(zhuǎn)9.2.2變形屬性2D變形例9-8在項(xiàng)目chapter9中再新建一個(gè)網(wǎng)頁文件，使用transition屬性和transform屬性來實(shí)現(xiàn)淘寶衣服圖片放大效果，文件名為example8.html，代碼如下。9.2.2變形屬性2D變形瀏覽網(wǎng)頁，初始效果如圖9-13所示，當(dāng)鼠標(biāo)指針停留在圖片上時(shí)，圖片放大1.3倍，如圖9-14所示。圖9-13初始效果圖9-14鼠標(biāo)指針停留在圖片上的放大效果

制作學(xué)院風(fēng)景墻任務(wù)99.3任務(wù)實(shí)現(xiàn)在項(xiàng)目chapter9中再新建一個(gè)網(wǎng)頁文件，利用過渡和變形等屬性實(shí)現(xiàn)照片墻效果，文件名為photos.html，在文件中首先添加照片，即搭建頁面結(jié)構(gòu)，然后給每張照片添加不一樣的動畫樣式。9.3.1搭建照片墻頁面結(jié)構(gòu)分析圖9-16，在頁面中有6張圖片，可以使用無序列表<ul>來定義，每張圖片放入一個(gè)列表項(xiàng)<li>中。圖9-16初始照片效果9.3.1搭建照片墻頁面結(jié)構(gòu)頁面結(jié)構(gòu)打開新創(chuàng)建的文件photos.html，添加照片墻頁面結(jié)構(gòu)代碼如下。9.3.1搭建照片墻頁面結(jié)構(gòu)頁面結(jié)構(gòu)此時(shí)瀏覽網(wǎng)頁，效果圖如9-17所示。圖9-17照片墻頁面結(jié)構(gòu)

9.3.2定義照片墻頁面CSS樣式樣式定義搭建照片墻頁面結(jié)構(gòu)后，使用CSS內(nèi)部樣式表設(shè)置各元素樣式，將該部分代碼放入<head