Web前端技术项目式教程课件 任务五 CSS3过渡、变形和动画

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）CSS3过渡、变形和动画任务五知识目标1熟悉CSS3过渡、变形和动画的语法规则。2了解3D透视的原理。能力目标1学会使用CSS3动画、过渡等完成网页动态效果。2学会使用CSS3的2D、3D转换完成网页元素的旋转、平移。缩放和倾斜效果。素质目标1培养学生具备一定的界面设计审美能力。2

培养学生良好的编程习惯和严谨的工作态度。思维导图任务描述李明接到宣传部制作中华传统文化照片墙页面的任务。本任务的具体要求如下。

用10张图像作为照片。

照片按照不同的位置和旋转角度随意摆放。

鼠标指针移动到某一张照片上时，此照片由倾斜缓慢旋转成端正，并且放大显示在最上层。知识引入1.过渡（transition）2.变换（transform）3.透视（perspective）4.动画（animation）1.过渡（transition）⑴transition-propertytransition-property用于规定应用过渡的CSS属性的名称。语法格式如下：transition-property:none|all|property;

属性值描述none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。1.过渡（transition）⑵transition-durationtransition-duration定义了过渡效果从开始到结束所花费的时间长度。语法格式如下：transition-duration:time;

1.过渡（transition）⑶transition-timing-functiontransition-timing-function属性用来设置过渡动画的类型

属性值描述linear匀速过渡效果。ease默认值，缓慢加速，然后缓慢减速的过渡效果。ease-in缓慢加速的过渡效果。ease-out缓慢减速的过渡效果。ease-in-out先缓慢加速，再缓慢减速的过渡效果。1.过渡（transition）⑷transition-delaytransition-delay定义了过渡效果开始应用的延迟时间，从而允许控制过渡效果何时开始执行。语法格式如下：transition-delay:time;

1.过渡（transition）⑸transitiontransition是以上几个属性的合并简写方式。语法格式如下：transition:propertydurationtiming-functiondelay

2．变形（transform）⑴平移（translate）平移分为三种情况：沿着X轴方向平移、沿着Y轴方向平移和同时沿着X轴和Y轴平移。

属性值描述translateX(距离)沿X轴将元素移动给定的距离。translateY(距离)沿Y轴将元素移动给定的距离。translate(距离,距离)沿X和Y轴将元素移动给定的距离。2．变形（transform）⑵旋转（rotate）旋转分为2D旋转和3D旋转两种。

属性值描述rotate(度数)元素在二维平面内旋转给定角度。rotateX(度数)元素围绕X轴旋转给定角度。rotateY(度数)元素围绕Y轴旋转给定角度。rotateZ(度数)元素围绕Z轴旋转给定角度。2．变形（transform）⑶缩放（scale）缩放，指的是“缩小”和“放大”。在CSS3中，可以使用scale()方法来将元素根据中心原点进行缩放。

属性值描述scaleX(倍数)元素仅沿水平方向缩放（X轴缩放）。scaleY(倍数)元素仅沿垂直方向缩放（Y轴缩放）。scale(倍数,倍数)元素沿着水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）。2．变形（transform）⑷倾斜（skew）倾斜分为三种情况：沿着X轴方向倾斜、沿着Y轴方向倾斜和同时沿着X轴和Y轴倾斜。属性值描述skewX(度数)使元素沿X轴倾斜给定角度。skewY(度数)使元素沿Y轴倾斜给定角度。skew(度数,度数)使元素沿X和Y轴倾斜给定角度。2．变形（transform）⑸transform-origintransform-origin用于指定元素在进行旋转、缩放、移动或倾斜等变换操作时的基点，即变换的原点。默认情况下，变换的原点是元素的中心点，即X轴和Y轴的50%处。transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。3．透视（perspective）CSS3中的perspective属性用于为3D位置变换的元素提供一种透视效果，这种效果使得子元素产生一种深度感，看起来就像它们位于3D空间中一样。使用perspective属性可以模拟人眼看到的物体远近大小变化，近大远小的视觉效果。语法如下：perspective:number;其中，number表示观察者到元素平面的距离，单位是像素（px）。数值越大，透视效果越弱；数值越小，透视效果越强。4．动画（animation）CSS3animation动画制作依赖于关键帧，制作动画包含两个部分：@keyframes和animation属性。⑴@keyframes规则用于创建动画效果的关键帧，并定义了动画过程中每个阶段的样式。具体语法如下：@keyframesanimationname{ keyframes-selector{ css-styles; }}4．动画（animation）⑵animation属性则用于指定动画的名称、持续时间、方向、循环次数等参数，具体语法如下:animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;任务实现：使用transform和transition

制作“照片墙”1.任务要求：10张照片以不同的位置和旋转角度随意摆放；鼠标移动到某一张照片上时，此照片由倾斜缓慢旋转成端正，并且放大显示在最上层。2.动画制作要点分析：每张照片的位置是不一样的，使用position给照片定位。每张照片有一定的倾斜角度，使用rotate旋转图片。照片能够缓慢地放大，需要结合scale和transition达到缓慢缩放的效果。任务拓展：使用animation制作“旋转的盒子”

1.任务要求：立体的盒子围绕中心点旋转。