第6章 实现CSS3动画-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第6章 实现CSS3动画 计划学时 6学时 内容分析 本章介绍了实现2D转换效果的translate()位移、rotate()旋转、scale()缩放和skew()倾斜方法，animation动画中的了@keyframes规则和animation属性，实现过渡效果的transition属性，3D转换，以及浏览器前缀 教学目标 与 教学要求 【知识目标】 1. 了解CSS3动画 2. 了解浏览器前缀 【技能目标】 1. 掌握CSS3中2D和3D的transform转换 2. 掌握CSS3中的transition过渡 3. 掌握CSS3中的animation动画 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 了解浏览器前缀，掌握translate()位移、rotate()旋转、scale()缩放和skew()倾斜方法，掌握@keyframes规则和animation属性 教学难点 实现本章节的3个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （translate()位移、rotate()旋转、scale()缩放和skew()倾斜） 一、提出需求，导入学习任务 （1）思考如何使用CSS3的属性和方法在网页中实现CSS3动画。 · 在早期的Web设计中，通常依赖于Flash或JavaScript脚本来实现网页中的动画或特效。而CSS3提供了对动画的强大支持，CSS3动画包括transform转换、animation动画和transition过渡3大模块，transform转换可对网页元素进行转换操作，animation动画可实现帧动画的效果，transition过渡可实现CSS属性的过渡变化，CSS3动画的应用极大的带动了网页设计的灵活性。 （2）明确学习方向。 · 了解CSS3动画 · 掌握translate()位移、rotate()旋转、scale()缩放和skew()倾斜方法 二、知识讲解 （一）2D transform转换 在CSS3中，2D转换是使用transform属性来实现文字或图像的各种转换效果，如位移、旋转、缩放、倾斜等转换方法。这些转换方法的使用，让网页效果更丰富，提升了用户的体验感。 1.transform-origin属性 （1）定义 CSS3中位移、旋转、缩放和倾斜都是默认以元素的中心原点进行转换，可通过transform-origin属性设置原点的位置，一旦中心原点改变，转换的效果就会不一样。 transform-origin属性可用来设置transform转换的原点位置。默认情况下，原点位置为元素的中心点。transform-origin属性的语法格式如下所示。 transform-origin: x-axis y-axis z-axis; （2）属性值 transform-origin属性可取值位置、百分数或px值。 · x-axis · y-axis · z-axis 由于2D转换没有Z轴，transform-origin属性可不设置Z轴的值。 2.translate()位移 （1）定义 translate()位移是2D转换的一种位移方法。translate()方法用于元素位移操作，在CSS3中，可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。translate()方法与relative相对定位相似，元素位置的改变不会影响到其他元素。 translate()位移的语法格式如下所示。 transform:translate(x,y); 或者分开写 transform:translateX(n); transform:translateY(n); （2）translate()方法 translate()位移可以改变元素的位置，以自身位置为基准进行移动，其值可为正数或负数，单位是px（像素）或%（百分比）。translate()位移方法可分为3种情况。 · translate(x,y) · translateX(n) · translateY(n) 原心的改变对于位移没有任何效果。 3.rotate()旋转 （1）定义 rotate()旋转是2D转换的一种旋转方法。rotate()方法用于元素旋转操作，在CSS3中，可以使用rotate()方法将元素相对于原点进行旋转。 rotate()旋转的语法格式如下所示。 transform:rotate(度数); （2）rotate()方法 rotate()旋转可根据给定的角度顺时针或逆时针旋转元素，其值可为正数或负数，单位是deg（角度单位）。角度值的