第五章 CSS 高级样式设计教案

谢从华，高蕴梅 著.Web前端设计基础入门——HTML5、CSS3、JavaScript（微课视频版）,2023, 清华大学出版社. ISBN：9787302641261.

 

一、教学目标

1. 知识目标：

    - 深入理解 CSS3 中 filter 滤镜属性的各个参数及效果，能准确阐述其对图片及元素视觉呈现的改变方式，熟知滤镜属性不同取值的具体含义与应用场景，如高斯模糊、亮度调整、对比度增强等滤镜的适用情况。

    - 牢固掌握 CSS3 变形（transform）属性下 translate、scale、rotate、skew 等方法的语法与功能，清晰解释各方法如何实现元素在平面上的平移、缩放、旋转与倾斜效果，包括参数的单位、正负值含义，如平移参数控制元素移动方向与距离，旋转参数决定旋转角度与方向。

    - 精准把握 transition 过渡属性的语法结构，明确 transition-property、transition-duration、transition-timing-function、transition-delay 等子属性的作用与取值范围，理解其如何实现元素属性从一个值到另一个值的平滑过渡，知晓常见过渡属性的 CSS 属性列表及适用过渡效果的场景。

    - 全面理解 animation 动画属性的构成与原理，熟悉 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state 等子属性的用法，掌握关键帧 @keyframes 的定义与使用规则，能运用动画属性创建复杂连续的动画效果，阐述其与 transition 过渡属性的区别与联系。

    - 透彻理解 CSS 页面布局相关知识，包括 display 属性的 block、inline、inline-block 三种常见取值的特点及对元素布局的影响，如块级元素独占一行、行内元素同行排列且宽高属性受限、行内块元素兼具两者优势；熟练掌握盒子模型（margin、padding、border、content）各部分的含义、属性设置方法及相互关系，能准确计算盒子模型在页面布局中的实际占用空间；清晰阐述标准文档流的特点、元素等级分类以及脱离标准流的方法（浮动、绝对定位、固定定位），明确不同定位方式（static、absolute、relative、fixed）的参照物、元素位置变化规律及对周围元素的影响，掌握 z-index 属性在三维空间中定位元素的堆叠顺序原理。

2. 能力目标：

    - 能够熟练运用 filter 滤镜属性为网页元素添加多样化视觉效果，根据网页设计主题和需求，如打造复古风格页面可运用 sepia 滤镜将图片转为深褐色，提升页面艺术氛围，灵活调整滤镜参数以达到最佳视觉呈现，解决网页元素视觉效果单一的问题。

    - 熟练使用 CSS3 变形属性对网页元素进行精准变形操作，结合 CSS 布局知识，如在构建导航菜单时利用 rotate 旋转图标、translate 平移菜单项，实现独特交互效果，增强网页动态感与用户体验，满足多样化页面布局需求。

    - 具备运用 transition 过渡属性实现网页元素动态交互的能力，根据用户操作反馈，如鼠标悬停时按钮的渐变效果、页面加载时元素的渐显，合理设置过渡属性参数，使元素变化流畅自然，提升网页交互友好度，解决网页交互生硬的问题。

    - 能够独立运用 animation 动画属性创建复杂动画效果，如开发网页开场动画、元素持续运动动画等，结合关键帧与动画属性子参数，精确控制动画流程、速度、循环次数与方向，展现网页动态魅力，吸引用户注意力，提升网页趣味性与专业性。

    -