Web前端基础案例 12

任务10制作校园照片墙页面Web前端开发案例教程（HTML5+CSS3）

（AI助学）微课版（第3版）CSS3不仅可以实现页面的基本样式,还可以提供对动画的强大支持,可以实现旋转、缩放、移动和过渡等效果，提高用户的体验。本任务的使用CSS3的过渡、变形等属性制作照片墙的动画效果。通过本任务的实现，掌握使用CSS3实现动画效果的各种方法。制作照片墙页面，浏览效果如图10-1、10-2所示。图10-1

初始照片效果图10-2

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

过渡属性10.2.2变形属性10.2.3动画属性10.2.1过渡属性在制作照片墙时我们需要把图片旋转甚至变形。10.2.1过渡属性CSS3提供了强大的过渡属性，在元素从一种样式转变为另一种样式时添加效果，如颜色和形状的变换等。10.2.1过渡属性过渡效果使用过渡属性transition来定义，过渡属性是一个复合属性，它包含一系列子属性，如下表所示。10.2.1过渡属性例10-1：使用transition的子属性设置过渡效果

example01.html图10-3鼠标指针未经过块元素时的效果

图10-4鼠标指针经过块元素时的效果10.2.1过渡属性上述样式代码中，分别设置了transition-property、transition-duration、transition-timing-function和transition-delay属性，为了简化代码，可使用transition属性进行综合设置，只需一行代码，代码如下。使用transiton属性设置过渡效果时，它的各个参数必须按照顺序来定义，不能颠倒；第三个和第四个参数可以省略，省略时表示以ease方式过渡，过渡拖延时间为0。注意10.2.1过渡属性例10-2：使用transition属性设置块元素的多种过渡效果，example02.html。代码中设置了边框、背景颜色、圆角半径和盒子阴影的过渡效果，当鼠标指针经过块元素时，块元素的边框样式、背景颜色、圆角半径和阴影都产生了过渡效果。10.2.1过渡属性图10-5鼠标指针未经过块元素时的预览效果图10-6鼠标指针经过块元素时的预览效果效果如图10-5和图10-6所示。10.2.1过渡属性例10-3：使用transition属性设置图像的过渡效果，example03.html。代码中设置了背景图像、边框和圆角半径的过渡效果，当鼠标指针经过块元素时，块元素的背景图像、边框和圆角半径都产生了过渡效果。10.2.1过渡属性效果如图10-7和图10-8所示。图10-7鼠标指针未经过块元素时的效果图10-8鼠标指针经过块元素时的效果10.2.1过渡属性例10-4：使用transition属性定义图片遮罩效果，example04.html。图10-9鼠标指针未经过图片时的效果图10-10鼠标指针经过图片时的效果代码略。10.2.2变形属性CSS3中与动画相关的第二个属性是transform属性，翻译成中文是“改变、转换”，它可以实现对元素的变形效果，如移动、倾斜、缩放以及翻转等。通过transform属性的变形函数能对元素进行2D或3D变形。10.2.2变形属性2D变形在CSS3中，2D变形主要包括平移、缩放、倾斜、旋转、改变中心点5种变化效果。（1）translate(x,y)——平移translate(x,y)函数用于重新定义元素的坐标，该函数的两个参数分别定义元素的水平和垂直坐标，参数值为像素值或者百分比，当参数为负数时，表示反方向移动元素（向上和向左移动）。如果省略了第二个参数，则取默认值0。也可以使用translateX(x)和translateY(y)分别设置这两个参数。10.2.2变形属性2D变形例10-5：使用translate(x,y)函数定义平移效果，example05.html。代码中，通过translate()方法将第二个盒子水平向右移动100px，垂直向下移动30px10.2.2变形属性2D变形（2）scale(x,y)——缩放scale(x,y)函数用于设置元素的缩放效果，该函数的两个参数分别定义元素在水平和垂直方向的缩放倍数，参数值为大于1的正数、负数和大于0且小于1的小数，不需要加单位，其中大于1的正数用于放大元素，负数用于翻转元素后，再缩放元素，大于0且小于1的小数用于缩小元素。如果第二个参数省略，则第二个参数默认等于第一个参数。也可以使用scaleX(x)和scaleY(y)分别设置这两个参数。10.2.2变形属性2D变形例10-6：使用scale(x,y)函数定义缩放效果，example06.html。代码中，通过scale()方法将第二个盒子放大，将第三个盒子缩小。10.2.2变形属性2D变形（3）skew(x,y)——倾斜skew(x,y)函数用于设置元素的倾斜效果，该函数的两个参数分别定义元素在水平和垂直方向的倾斜角度，参数值为角度数值，单位为deg，第一个参数为正数时，表示绕×轴顺时针旋转的度数；第二个参数为正数时，表示绕y轴顺时针旋转的度数；若参数为负数时，则旋转方向相反。如果第二个参数省略，则第二个参数默认为0。也可以使用skewX(x)和skewY(y)分别设置这两个参数。10.2.2变形属性2D变形例10-7使用skew(x,y)函数定义倾斜效果，example07.html。代码中，通过skew()方法将第二个盒子水平倾斜45度，垂直倾斜10度。10.2.2变形属性2D变形（4）rotate(deg)——旋转rotate(deg)函数用于设置元素的旋转效果，参数值为角度数值，单位为deg，取值为正数或者负数，正数表示顺时针旋转，负数表示逆时针旋转。10.2.2变形属性2D变形例10-8：使用rotate(x,y)函数定义旋转效果，example08.html。通过rotate()方法将第二个盒子旋转45度。10.2.2变形属性2D变形（5）transform-origin——改变中心点通过transform属性实现了元素的平移、缩放、倾斜、旋转效果，这些效果都是在元素的中心点不变的情况下进行的。默认情况下，元素的中心点在x轴和y轴的交叉位置，如果要改变中心点，可以使用transform-origin属性来改变。其基本语法格式如下。transform-origin属性需要设置x、y、z这3个参数，默认值都是50%，它们代表元素中心点的位置，x和y可以是百分比、像素值等具体的值，也可以是top、right、left、bottom等关键词，z不能是百分比，一般都是像素值。transform-origin:xyz;10.2.2变形属性2D变形例10-9：使用transform-origin改变中心点，example09.html。10.2.2变形属性2D变形例10-10：使用transition属性和transform属性来实现衣服图片放大效果，example10.html。10.2.2变形属性3D变形既然transform-origin支持z轴的偏移，那么transform支持3D变形非常方便。3D变形就是在2D变形的基础上加上z轴的变化，它更加注重空间位置的变化。10.2.2变形属性3D变形用于3D变形的属性如表10-2所示。10.2.2变形属性3D变形（1）rotate3d()——3D旋转rotate3d()是rotateX()、rotateY()、rotateZ()的综合属性，用于定义多个轴的3D旋转，其语法格式如下：rotate3d(x,y,z,angle)；rotateX(angle)；其中，x、y、z可以取值0或1。要沿着某个轴转动，就将该轴的值设置为1，否则设置为0。angle是要旋转的角度，正数或者负数都可以，如果取值为正则围绕某个轴顺时针旋转，否则逆时针旋转。rotateX(angle)中angle也是定义的旋转角度，取值是相同的。10.2.2变形属性3D变形例10-11：使用rotate3d()实现3D旋转，example11.html。第二个盒子使用rotateX()函数设置了沿X轴旋转180度。10.2.2变形属性3D变形（2）perspective属性——设置3D透视效果perspective属性用于设置3D透视效果，它对于3D变形来说至关重要，它可以被理解为视距，属性值越小，透视效果越突出，取值为none或者具体的像素值。10.2.2变形属性3D变形例10-12：使用perspective设置透视效果，example12.html。10.2.2变形属性3D变形上述代码中,对上面的盒子通过perspective属性设置透视效果，鼠标指针经过时效果如图10-19所示；第二个盒子没有设置透视效果，鼠标指针经过时如图10-20所示。图10-19上面盒子的透视效果图10-20下面盒子未设置透视效果10.2.2变形属性3D变形例10-13：盒子中放入两张图片，鼠标指针移动到图片上时，实现图片的翻转效果，如图10-21～图10-23所示。example13.html。图10-21显示第一张图片图10-22图片翻转图10-23翻转后显示第二张图片代码略。10.2.3动画属性CSS3除了支持过渡和变形动画外，还可以通过动画属性（animation）创建帧动画，从而实现更为复杂的动画效果。10.2.3动画属性@keyframes——定义关键帧@keyframes规则用于定义动画的关键帧，animation属性必须配合@keyframes规则才能实现动画效果。其基本语法格式如下。@keyframesanimationname{keyframes-selector{css-styles}}是当前动画的名称关键帧选择器，通俗地说就是动画发生的位置，可以是百分比、from或toCSS样式属性的结合，也就是执行到当前关键帧时对应的动画状态。10.2.3动画属性@keyframes——定义关键帧例如，下面的代码定义了关键帧，共5帧，在每帧中设置left和top属性，让它们的值发生改变，产生动画。@keyframesball{0%{left:0;top:0;}25%{left:200px;top:0;}50%{left:200px;top:200px;}75%{left:0;top:200px;}100%{left:0;top:0;}}注意：使用定义关键帧，并不能产生动画效果，还需要设置animation属性才行。10.2.3动画属性设置动画属性10.2.3动画属性设置动画属性例如，使用animation各子属性创建动画的格式代码如下。animation-name:keyframename; /*定义动画名称*/animation-duration:time; /*定义动画持续时间*/animation-timing-function:ease; /*定义动画速度曲线*/animation-delay:time; /*定义动画延迟播放的时间*/animation-iteration-count:count; /*定义动画播放次数*/animation-direction:normal; /*定义动画方向*/10.2.3动画属性设置动画属性使用animation属性设置动画时，和transition属性类似，一般通过animation综合属性进行设置，其基本语法格式如下。animat