本文聚焦于天坛这一历史古迹，通过CSS3的过渡效果为天坛图片添加生动的动画，如渐变放大、透明度变化等，使静态图片焕发新生。文章详细介绍了CSS3 Transition属性的应用，包括过渡时间、速度曲线和延迟等参数的设置，手把手教你实现具有视觉吸引力的图片动画效果，适合所有希望提升网页设计水平的开发者。
任务描述
简要介绍项目背景，明确学习目标。阐述学校导航栏的设计需求，包括期望达到的动画效果及其在用户体验上的重要性。 原始案例框架性代码 当鼠标悬浮图像上0.5秒后先放大宽度再放大高度。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css3过渡动画</title>
<style>
img {
width: 200px;
height: 200px;
transition: width 1s, height 1s ease-in-out 0.5s;
-moz-transition: width 1s, height 1s ease-in-out 0.5s;
-webkit-transition: width 1s, height 1s ease-in-out 0.5s;
-o-transition: width 1s, height 1s ease-in-out 0.5s;
}
img:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>图片过渡动画</h1>
<img src="img/bj.png" title="北京故宫" alt="mysql" />
</body>
</html>
知识回顾
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等。CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作如伪类触发样式平滑过渡。
在实现过渡动画时，必须设置动画属性的初始值，否则动画无效。如果动画定义在基本样式中，当动作结束时，动画会反向过渡到初始值，定义在动作中，则不会有动画的反向，而是直接回到初始值。
语法
transition:[transition-property transition-duration transition-timing-function transition-delay ]
其中：
- transition-property：过渡或动态模拟的CSS属性
- transition-duration：完成过渡所需要的时间
- transition-timing-function：指定过渡函数，默认由快到慢
- transition-delay： 过渡开始出现的延迟时间，默认不延迟
以上这些也可以单独作为过渡样式属性使用。
任务实施
transition-property过渡
规定应用过渡效果的 CSS 属性的名称，即产生动画的样式属性，必须和transition-duration一起使用。
语法
transition-property:none | all | property;
其中：
- none: 没有属性会获得过渡效果
- all:所有定义了初始值，并在动作中改了值的属性都将获得过渡效果，所有属性会同时过渡，没有先后顺序。
- property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
示例
修改图像的动画，设置宽和高的过渡，两个属性会组合成一个过滤效果。
img{
width:200px;
height:200px;
transition-property:width,height;/*宽、高会产生过渡效果*/
}
transition-duration过渡
规定完成过渡效果需要花费的时间（以秒s或毫秒ms计），数值后必须带单位。默认值是 0，意味着不会有效果。
语法
transition-duration: time;
示例
img{
width:200px;
height:200px;
transition-property:width,height;/*宽、高会产生过渡效果*/
transition-duration: 5s;/*5秒完成过渡*/
}
transition-timing-function
规定过渡效果的速度曲线。
语法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out
其中
- linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
- ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
- ease-in：规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out：规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out：规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
- cubic-bezier(n,n,n,n)：自定义速度曲线，可能的值是 0 至 1 之间的数值。
示例
transition-timing-function: ease-in-out;/*先慢再快再慢*/
transition-delay
规定过渡效果何时开始，即动作执行后动画延迟多长时间触发，（以秒s或毫秒ms计）。可以为负数，表示给定时间长度的动画跳过，立即从给定时间点开始执行动画。默认为0，表示不延迟。
语法
transition-delay: time;
示例
transition-delay: 1s;/*延迟1秒执行*/
opacity透明
在CSS中，透明度可以通过使用opacity属性来设置。opacity属性定义了一个元素的不透明度，取值范围从0到1。
语法
selector {
opacity: value; /* 值是0到1之间的数字 */
}
- 值为0：元素完全透明，不可见。
- 值为1：元素完全不透明，完全可见。
- 值在0和1之间：元素的透明度逐渐增加。例如，
opacity: 0.5表示元素的透明度为50%。
实验实训
实验一：学校导航菜单渐进渐出效果
任务要求：
- 实现一级导航悬浮时显示二级导航
- 二级导航默认时隐藏，透明度为0，实现渐入动画
实验二：课程卡片上的悬浮特效
任务要求
- 右图为原始效果（包括视频封面、视频简介、老师头像、播放次数），左图是鼠标移动到视频上的效果，出现播放小图标
- 当鼠标悬浮到封面图上时显示播放按钮，初始放大2倍，透明度为0，在0.8秒内透明度变为1，放大倍数为1
- 当鼠标离开封面时隐藏按钮，在0.8秒内透明度变为0，放大倍数为2
任务实现效果如下图所示
