任务9制作学院风景墙

任务9制作学院风景墙Web前端开发案例教程HTML5+CSS3项目式微课版为了追求更好的网页浏览与交互体验,用户对网站的美观性和交互性的要求越来越高。CSS3不仅可以实现页面的基本样式,还可以提供对动画的强大支持,可以实现旋转、缩放、移动和过渡等效果，提高用户的体验。本任务的使用CSS3的过渡、变形等属性制作照片墙的动画效果。通过本任务的实现，掌握使用CSS3实现动画效果的各种方法。

制作学院风景墙任务9制作照片墙页面，具体要求如下。（1）在页面中放入六张图片，图片大小240px*240px。鼠标指针移动到每张图片上时，显示不同的动画效果。（2）鼠标指针移动到第一张图片上时，将图片变为圆形。（3）鼠标指针移动到第二张图片上时，逆时针旋转60度。（4）鼠标指针移动到第三张图片上时，顺时针旋转360度。（5）鼠标指针移动到第四张图片上时，给照片添加阴影并且逆时针旋转10度。（6）鼠标指针移动到第五张图片上时，产生3D变形、沿Y轴旋转180度。（7）鼠标指针移动到第六张图片上时，将照片放大1.2倍。任务描述任务效果制作照片墙页面，浏览效果如图9-1所示。图9-1学院照片墙知识点过渡属性01变形属性02

制作学院风景墙任务9如果直接变化就如同两张图片直接相互转换，不美观。9.2.1过渡属性为了能更好的体现出一个状态向另一个状态变化的过程。在制作照片墙时我们需要把图片旋转甚至变形。有什么好办法吗?9.2.1过渡属性

这就好比我们让块元素由一种颜色渐变成另一种颜色的过程。我们需要体现出颜色渐变时的状态。CSS3提供了强大的过渡属性，在元素从一种样式转变为另一种样式时添加效果，如颜色和形状的变换等。9.2.1过渡属性过渡效果使用过渡属性transition来定义，过渡属性是一个复合属性，它包含一系列子属性，主要包括transition-property、transition-duration、transition-timing-function、transition-delay等。表10-1所示为过渡属性的含义。属性名作用属性值描述transition-property指定应用过渡效果的CSS属性名称none没有属性会获得过渡效果all所有属性都将获得过渡效果property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔transition-duration定义过渡效果花费的时间time默认为0，常用单位是秒（s）或毫秒（ms）transition-timing-function定义过渡效果的速度曲线Ease慢速开始，中间变快，最后慢速结束的过渡效果，默认值Linear以相同速度开始至结束的过渡效果ease-in慢速开始，逐渐加快的过渡效果ease-out慢速结束的过渡效果ease-in-out慢速开始和结束的过渡效果cubic-bezier特殊的立方贝塞尔曲线效果，它的值在0-1之间transition-delay定义过渡效果延迟时间time默认值为0，常用单位是秒（s）或毫秒（ms）transition综合设置过渡的所有属性值propertydurationtiming-functiondelay按照各属性顺序用一行代码设置4个参数值，属性顺序不能颠倒9.2.1过渡属性例9-1在HBuilderX中，新建空项目，项目名称为chapter9，在项目内新建网页文件，使用transition的子属性设置过渡效果，文件名为example01.html，代码如下。9.2.1过渡属性代码中设置了应用过渡效果的属性、过渡效果花费的时间、过渡方式和延迟时间，当鼠标指针经过块元素时，背景颜色产生过渡效果，如图9-2和图9-3所示。图9-2鼠标指针未经过块元素时的预览效果

图9-3鼠标指针经过块元素时的预览效果

9.2.1过渡属性上述样式代码中，分别设置了transition-property、transition-duration、transition-timing-function和transition-delay属性，为了简化代码，可使用transition属性进行综合设置，只需一行代码，代码如下。使用transiton属性设置过渡效果时，它的各个参数必须按照顺序来定义，不能颠倒；第三个和第四个参数可以省略，省略时表示以ease方式过渡，过渡拖延时间为0。注意9.2.1过渡属性例9-2在项目chapter9中再新建一个网页文件，使用transition属性设置块元素的多种过渡效果，文件名为example02.html，代码如下。代码中设置了边框、背景颜色、圆角半径和盒子阴影的过渡效果，当鼠标指针经过块元素时，块元素的边框样式、背景颜色、圆角半径和阴影都产生了过渡效果。9.2.1过渡属性图9-4鼠标指针未经过块元素时的预览效果图9-5鼠标指针经过块元素时的预览效果效果如图9-4和图9-5所示。例9-3在项目chapter9中再新建一个网页文件，使用transition属性设置图像的过渡效果，文件名为example03.html，代码如下。9.2.1过渡属性代码中设置了背景图像、边框和圆角半径的过渡效果，当鼠标指针经过块元素时，块元素的背景图像、边框和圆角半径都产生了过渡效果。9.2.1过渡属性效果如图9-6和图9-7所示。图9-6鼠标指针未经过块元素时的效果图9-7鼠标指针经过块元素时的效果9.2.1过渡属性例9-4在项目chapter9中再新建一个网页文件，使用transition属性定义图片遮罩效果，文件名为example04.html，代码如下。结构代码中使用了<hgroup>标记页面结构：9.2.1过渡属性样式定义：样式代码中使用了:nth-child()选择器，用于选择元素。上述代码中使用transition过渡属性，使鼠标指针经过图片时，产生图片遮罩效果，如图9-8和图9-9所示。图9-8鼠标指针未经过图片时的效果图9-9鼠标指针经过图片时的效果9.2.1过渡属性9.2.2变形属性CSS3中与动画相关的第二个属性是transform属性，翻译成中文是“改变、转换”，它可以实现对元素的变形效果，如移动、倾斜、缩放以及翻转等。通过transform属性的变形函数能对元素进行2D或3D变形。我们来学习2D变形。9.2.2变形属性2D变形在CSS3中，2D变形主要包括平移、缩放、倾斜、旋转、改变中心点5种变化效果。（1）translate(x,y)——平移translate(x,y)函数用于重新定义元素的坐标，该函数的两个参数分别定义元素的水平和垂直坐标，参数值为像素值或者百分比，当参数为负数时，表示反方向移动元素（向上和向左移动）。如果省略了第二个参数，则取默认值0。也可以使用translateX(x)和translateY(y)分别设置这两个参数。9.2.2变形属性2D变形例9-5在项目chapter9中再新建一个网页文件，使用translate(x,y)函数定义平移效果，文件名为example05.html，代码如下。代码中，通过translate()方法将第二个盒子水平向右移动100px，垂直向下移动30px9.2.2变形属性2D变形网页效果如图9-10所示。图9-10通过translate()方法实现平移9.2.2变形属性2D变形（2）scale(x,y)——缩放scale(x,y)函数用于设置元素的缩放效果，该函数的两个参数分别定义元素在水平和垂直方向的缩放倍数，参数值为大于1的正数、负数和大于0且小于1的小数，不需要加单位，其中大于1的正数用于放大元素，负数用于翻转元素后，再缩放元素，大于0且小于1的小数用于缩小元素。如果第二个参数省略，则第二个参数默认等于第一个参数。也可以使用scaleX(x)和scaleY(y)分别设置这两个参数。9.2.2变形属性2D变形例9-6在项目chapter9中再新建一个网页文件，使用scale(x,y)函数定义缩放效果，文件名为example06.html，代码如下。代码中，通过scale()方法将第二个盒子放大，将第三个盒子缩小。9.2.2变形属性2D变形网页效果如图9-11所示。图9-11通过scale()方法实现缩放9.2.2变形属性2D变形（3）skew(x,y)——倾斜skew(x,y)函数用于设置元素的倾斜效果，该函数的两个参数分别定义元素在水平和垂直方向的倾斜角度，参数值为角度数值，单位为deg，取值为正数或者负数表示不同的倾斜方向。如果第二个参数省略，则第二个参数默认为0。也可以使用skewX(x)和skewY(y)分别设置这两个参数。9.2.2变形属性2D变形例9-7在项目chapter10中再新建一个网页文件，使用skew(x,y)函数定义倾斜效果，文件名为example07.html，代码如下。代码中，通过skew()方法将第二个盒子水平倾斜45度，垂直倾斜10度。9.2.2变形属性2D变形（4）rotate(angle)——旋转rotate(angle)函数用于设置元素的旋转效果，参数值为角度数值，单位为deg，取值为正数或者负数，正数表示顺时针旋转，负数表示逆时针旋转。9.2.2变形属性2D变形例9-7在项目chapter9中再新建一个网页文件，使用rotate(x,y)函数定义旋转效果，文件名为example07.html，代码如下。代码中，通过rotate()方法将第二个盒子旋转45度。9.2.2变形属性2D变形网页效果如图9-12所示。图9-12通过rotate()方法实现旋转9.2.2变形属性2D变形例9-8在项目chapter9中再新建一个网页文件，使用transition属性和transform属性来实现淘宝衣服图片放大效果，文件名为example8.html，代码如下。9.2.2变形属性2D变形浏览网页，初始效果如图9-13所示，当鼠标指针停留在图片上时，图片放大1.3倍，如图9-14所示。图9-13初始效果图9-14鼠标指针停留在图片上的放大效果

制作学院风景墙任务99.3任务实现在项目chapter9中再新建一个网页文件，利用过渡和变形等属性实现照片墙效果，文件名为photos.html，在文件中首先添加照片，即搭建页面结构，然后给每张照片添加不一样的动画样式。9.3.1搭建照片墙页面结构分析图9-16，在页面中有6张图片，可以使用无序列表<ul>来定义，每张图片放入一个列表项<li>中。图9-16初始照片效果9.3.1搭建照片墙页面结构页面结构打开新创建的文件photos.html，添加照片墙页面结构代码如下。9.3.1搭建照片墙页面结构页面结构此时浏览网页，效果图如9-17所示。图9-17照片墙页面结构

9.3.2定义照片墙页面CSS样式样式定义搭建照片墙页面结构后，使用CSS内部样式表设置各元素样式，将该部分代码放入<head