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

PAGE1PAGE任务五CSS3过渡、变形和动画课程名称网页设计项目名称CSS3过渡、变形和动画任务名称CSS3过渡、变形和动画课时4项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.学会使用CSS3动画、过渡等制作动态网页。2.学会使用CSS3的2D转换、3D转换实现网页元素的旋转、平移、缩放和倾斜效果。知识目标：1.熟悉CSS3过渡、变换和动画的语法规则。2.了解3D透视的原理。素质目标：1.培养学生一定的界面设计、审美能力。2.培养学生良好的编程习惯和严谨的工作态度。教学内容1.任务描述2.任务展示与实现（1）利用编辑工具编写CSS3代码并验证其效果（2）学生动手操作3.教师讲解本任务涉及的知识点4.任务小结教学重点（1）实现首页和二级页面的水平导航条（2）实现首页内容部分——华阳湖景区、岭南水乡小镇和职位列表教学难点（1）animation动画制作教学准备1.装有vscode的电脑2.教学课件PPT3.教材：《Web前端技术项目化教程》作业设计1．设计一个网站的首页菜单栏。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别从CSS3的过渡、变换和动画等知识点进行介绍。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。1．过渡（1）transition-property属性transition-property属性用于规定应用过渡的CSS属性的名称，其语法格式如下。transition-property:none|all|property;（2）transition-duration属性transition-duration属性用于定义过渡效果从开始到结束所花费的时间，其语法格式如下。transition-duration:time;（3）transition-timing-function属性（4）transition-delay属性transition-delay属性用于定义过渡效果开始应用的延迟时间，从而控制过渡效果在何时开始实现，其语法格式如下。transition-delay:

time;（5）transition属性transition属性是以上几个属性的合并简写方式，其语法格式如下。transition:propertydurationtiming-functiondelay2．变换CSS3中的变换功能为网页设计提供了丰富的视觉效果，使得开发者能够创建出动态、吸引人的页面元素。它包括对元素进行各种2D和3D变换，这些变换包括平移（采用translate属性）、旋转（采用rotate属性）、缩放（采用scale属性）、倾斜（采用skew属性）。如需修改变换基点，可以使用transfor（1）平移平移分为3种情况：沿着x轴方向平移、沿着y轴方向平移，以及同时沿着x轴和y轴方向平移。m-origin。（2）旋转旋转分为2D旋转和3D旋转两种。（3）缩放缩放指的是“缩小”和“放大”。在CSS3中，可以使用scale属性将元素根据中心原点进行缩放。（4）倾斜倾斜分为3种情况：沿x轴方向倾斜、沿y轴方向倾斜，以及同时沿x轴和y轴方向倾斜。transform-origin属性3．透视CSS3中的perspective属性用于为3D变换的元素提供透视效果，这种效果使得子元素产生深度感，看起来就像它们位于3D空间中一样。使用perspective属性可以模拟人眼看到的物体近大远小的视觉效果。具体语法如下。perspective:number;4．动画CSS3动画（采用animation属性）制作依赖关键帧。制作动画主要使用两个部分：@keyframes和animation属性。1.使用transform属性和transition属性制作照片