项目一 第二阶段 任务17 使用CSS动画制作下拉菜单-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用CSS3设置网页格式 第二阶段 能够叙述CSS3中的过渡属性，并能够制作过渡时间、动画快慢等常见过渡效果。 能够叙述CSS3中的变形属性，并能够制作各种转换效果。 能够叙述CSS3中的动画属性，并能够制作网页常见的动画效果。 能够综合运用过渡、变形和动画样式属性，制作D清单页面的下拉菜单动画。 任务目标 任务17 使用CSS动画制作下拉菜单 本次任务要求根据D清单网页内容，使用CSS样式，在任务16基础上使用CSS动画制作D清单页面的酷炫下拉菜单。 完成后的效果图如图1-17所示。 任务描述 图1-17 使用CSS动画制作酷炫下拉菜单后的网页效果图 任务17 使用CSS动画制作下拉菜单 在CSS3中，提供了对动画制作的支持，通过样式的设置，我们可以实现动画的过渡、2D转换、3D转换、旋转、缩放等效果。我们可以根据CSS3的动画样式来制作酷炫下拉菜单。要使用CSS动画制作酷炫下拉菜单，需要： 学习过渡属性、变形属性、动画属性的使用； 分析D清单页面中的酷炫下拉菜单内容，正确使用CSS样式完成D清单网页内容制作。 D清单酷炫下拉菜单CSS动画制作分析如图1-17-1所示。 任务分析 任务17 使用CSS动画制作下拉菜单 任务分析 图1-17-1 D清单酷炫下拉菜单CSS动画制作分析图 任务17 使用CSS动画制作下拉菜单 知识与技能准备 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容： （1）规定希望把效果添加到哪个 CSS 属性上 （2）规定效果的时长 1.1 transition-property 属性 transition-property 属性规定应用过渡效果的 CSS 属性的名称。即当指定的 CSS 属性改变时，过渡效果将开始。 1、过渡效果 语法：transition-property：属性值； 表1-17-1 transition-property 属性值 知识与技能准备 1.2 transition-duration transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。 说明：默认值是0，表示不会有过渡效果。 1、过渡效果 语法：transition-duration: time; 课堂练习1-17-1制作颜色区域的扩展效果 HTML代码： CSS代码： 1 2 3 <div></div> <p>请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。</p> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 div{ width:100px; height:100px; background:#f00; transition-property: width; transition-duration: 2s; -moz-transition-property: width; /* -moz-为兼容Firefox浏览器 */ -moz-transition-duration: 2s; -webkit-transition-property: width; /* -webkit-为兼容Safari and Chrome 浏览器*/ -webkit-transition-duration: 2s; -o-transition-property: width; /* -o-为兼容Opera浏览器 */ -o-transition-duration: 2s; } div:hover{width:300px;} 课堂练习1-17-1制作颜色区域的扩展效果 显示效果如图1-17-2和图1-17-3所示： 图1-17-2 过渡效果-鼠标未经过红色区域 图1-17-3 过渡效果-鼠标经过红色区域逐渐过渡 课堂练习1-17-2制作颜色区域的颜色变化效果 HTML代码： CSS代码： 1 2 3 4 5 <div></div> <p>请把鼠标指针移动到红色的 div 元素上，就可以看到红色到黄色的过渡效果。 </p> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 div{ width:300px; height:100px; background:#f00; transition-property:background; transition-duration: 2s; -moz-transition-property: background; /* -moz-为兼容Firefox浏览器 */ -moz-transitio