项目8：CSS3特效属性
黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰
🎯 教学目标
知识目标

掌握 transition 过渡属性、transform 变形属性、animation 动画属性的语法与用法。

能力目标

能独立编写代码实现网页的过渡、变形、旋转、缩放及复杂动画效果。

素质目标

培养创新思维、精益求精的工作态度及良好的团队协作能力。

🚩 任务1：制作手风琴动画页面
💡 任务分析： 通过设置列表项的浮动与 Hover 伪类，结合 Transition 属性，实现鼠标悬停时图片展开、其他图片收缩的动态效果。

🛠️ 实施步骤

  1. 结构搭建： 创建 DIV 容器，内部插入无序列表 <ul>，每个列表项 <li> 中放入图片和文字 DIV。
  2. 基础样式： 设置容器宽度、居中；对列表项设置浮动布局。
  3. 过渡效果： 在图片或列表项上应用 transition 属性，定义宽度或透明度变化的时间。
  4. 交互触发： 使用 :hover 伪类定义鼠标悬停时的样式（如宽度变大），浏览器会自动补间过渡。
⚙️ 核心知识：过渡 (Transition)

Transition 属性用于定义元素从一种样式逐渐改变为另一种样式的效果。如果没有过渡，元素的状态切换会显得突兀。

1. 复合属性语法：
transition: property duration timing-function delay;
2. 子属性详解：
属性 含义 示例值
transition-property 指定要过渡的 CSS 属性名称 (如 width, height) 或 all width
transition-duration 完成过渡所需时间 (秒或毫秒) 2s
transition-timing-function 速度曲线函数 ease, linear
transition-delay 开始过渡前的延迟时间 0.5s
3. 速度曲线 (Timing Function)：
值 效果描述
ease 慢速开始，然后变快，最后慢速结束 (默认)
linear 匀速
ease-in 慢速开始
ease-out 慢速结束
cubic-bezier(n,n,n,n) 自定义贝塞尔曲线
🚩 任务2：制作照片墙旋转缩放特效
💡 任务分析： 利用 Transform 属性对图片进行几何变换，结合 Transition 实现鼠标悬停时的 3D 旋转与缩放效果，打造酷炫的照片墙。

🛠️ 实施步骤

  1. 布局容器： 创建 DIV 容器，放入 6 张图片 <img> 标签。
  2. 基础样式： 设置图片的边框、阴影、浮动，并统一设置 transition 过渡效果。
  3. 初始变换： 使用 transform: rotate(); 和 scale(); 设置图片的初始随机倾斜角度和缩小比例。
  4. 悬停效果： 在 Hover 状态下，将旋转角度归零并恢复原始大小，产生动态回正效果。
🔄 核心知识：变形 (Transform)

Transform 属性允许你对元素进行旋转、缩放、移动或倾斜。它不会影响页面流中的其他元素。

1. 2D 变换方法：
方法 含义
translate(x, y) 位移：沿着 X 轴和 Y 轴移动元素
scale(x, y) 缩放：改变元素的宽高尺寸
rotate(angle) 旋转：围绕 Z 轴旋转元素（如 rotate(30deg)）
skew(x-angle, y-angle) 倾斜：沿着 X 轴和 Y 轴倾斜元素
2. 3D 变换与坐标系：
  • 3D 变换： 支持 rotateX(), rotateY(), translateZ() 等，实现立体效果。
  • 原点设置 (Origin)： 默认以元素中心点 transform-origin: 50% 50% 为轴心进行变换。可以设置为 top left 或具体像素值来改变旋转轴心。
  • 透视 (Perspective)： 定义用户与 3D 元素之间的距离，值越小，3D 效果越强烈。
🚩 任务3：制作“网站加载等待”页面
💡 任务分析： 使用 Animation 配合关键帧 @keyframes，实现一个无限循环的旋转加载动画，模拟网页数据请求状态。

🛠️ 实施步骤

  1. 结构搭建： 创建一个外层容器 DIV，内部包含一个用于动画的 DIV 和一个文字 DIV。
  2. 样式定义： 将动画 DIV 设置为正方形，通过 border-radius 变成圆形，设置背景色。
  3. 关键帧定义： 使用 @keyframes 定义动画过程（如：0% 旋转0度，100% 旋转360度）。
  4. 应用动画： 在元素上使用 animation 属性，指定动画名称、时长、线性运动及无限循环。
🎬 核心知识：动画 (Animation)

Animation 属性允许你通过定义关键帧（Keyframes）来创建复杂的动画序列，比 Transition 更灵活。

1. 定义关键帧 (@keyframes)：
@keyframes myAnimation {
			    0%   { transform: rotate(0deg); background: red; }
			    25%  { transform: rotate(90deg); background: blue; }
			    50%  { transform: rotate(180deg); background: green; }
			    100% { transform: rotate(360deg); background: yellow; }
			}
2. Animation 属性简写：

animation: name duration timing-function delay iteration-direction;

属性 说明
animation-name 指定 @keyframes 定义的动画名称
animation-duration 动画完成一个周期所需的时间 (如 2s)
animation-timing-function 速度曲线 (如 linear, ease-in)
animation-delay 动画开始前的延迟
animation-iteration-count 播放次数 (如 3, infinite 无限循环)
animation-direction 播放方向 (normal, reverse, alternate 往返)
animation-fill-mode 动画外状态 (forwards: 停在结尾, backwards: 停在开头)
📝 随堂测试

请完成以下单选题，检验本节课的学习成果：

1. 在 CSS3 中，用于定义元素过渡效果（如渐变、滑动）的属性是？
2. 如果想让一个元素绕其中心顺时针旋转 45 度，应该使用哪个代码？
3. 在 @keyframes 规则中，"from" 等同于多少百分比？
📌 课堂总结

本节课我们深入学习了 CSS3 的三大特效属性：

  • Transition (过渡)： 简单的“开始-结束”状态变化，适合制作悬停效果。
  • Transform (变形)： 改变元素的形状、位置和角度（2D/3D）。
  • Animation (动画)： 通过关键帧定义复杂的、多步骤的动画序列。

💡 重点提示： 记住 transform 的默认原点是元素中心，而 animation 需要配合 @keyframes 使用。课后请尝试修改任务中的参数，观察动画效果的变化。