![](https://cos-cdn.shuashuati.com/pipixue-web/2020-1231-2005-12/ti_inject-812ce.png)
【案例 9-1 】盒子阴影过渡 一、案例描述 1、 考核知识点 transition 属性 2、 练习目标 Ø 理解 transition 属性的用法。 Ø 能够运用 transition 相关属性实现元素的过渡效果。 3、 需求分析 CSS3 提供了强大的过渡属性,可以为元素从一种样式转变为另一种样式时添加效果,例如渐显、渐弱、动画快慢等。在 CSS3 中,过渡属性主要包括 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 、 transition 属性 。本案例通过 transition 相关属性 实现一个盒子的边框阴影过渡效果。 4、 案例分析 1) 默认效果如图 9-1 所示。 图9-1 盒子阴影过渡前效果 当鼠标移上蓝色背景区域时,盒子阴影会出现如图 9-2 所示的过渡效果。 图9-2 盒子阴影过渡效果 2) 具体实现步骤如下所示: a) 定义一个大盒子,设置应用的宽度和高度及背景色,用 transition 属性为盒子阴影设置过渡效果 过渡效果为:属性为:所有;持续时间为 1 秒;速度曲线: ease ;过渡开始时间为: 0 秒。 b) 定义大盒子鼠标移上时,显示盒子阴影过渡效果 (阴影的颜色和位置可以自己设置)。 c) 可以加上一些其它效果,看一下。