HTML5+CSS3网页设计与制作课件：使用CSS动画制作下拉菜单

HTML5+CSS3网页设计与制作使用CSS动画制作下拉菜单能够叙述CSS3中的过渡属性，并能够制作过渡时间、动画快慢等常见过渡效果。能够叙述CSS3中的变形属性，并能够制作各种转换效果。能够叙述CSS3中的动画属性，并能够制作网页常见的动画效果。能够综合运用过渡、变形和动画样式属性，制作D清单页面的下拉菜单动画。任务目标

使用CSS动画制作下拉菜单本次任务要求根据D清单网页内容，使用CSS样式，在基础上使用CSS动画制作D清单页面的酷炫下拉菜单。完成后的效果图如图1-17所示。任务描述图1-17使用CSS动画制作酷炫下拉菜单后的网页效果图

使用CSS动画制作下拉菜单在CSS3中，提供了对动画制作的支持，通过样式的设置，我们可以实现动画的过渡、2D转换、3D转换、旋转、缩放等效果。我们可以根据CSS3的动画样式来制作酷炫下拉菜单。要使用CSS动画制作酷炫下拉菜单，需要：学习过渡属性、变形属性、动画属性的使用；分析D清单页面中的酷炫下拉菜单内容，正确使用CSS样式完成D清单网页内容制作。D清单酷炫下拉菜单CSS动画制作分析如图1-17-1所示。任务分析

使用CSS动画制作下拉菜单任务分析图1-17-1D清单酷炫下拉菜单CSS动画制作分析图

使用CSS动画制作下拉菜单知识与技能准备通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：（1）规定希望把效果添加到哪个CSS属性上（2）规定效果的时长1.1transition-property属性transition-property属性规定应用过渡效果的CSS属性的名称。即当指定的CSS属性改变时，过渡效果将开始。1、过渡效果语法：transition-property：属性值；表1-17-1transition-property属性值知识与技能准备1.2transition-durationtransition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。说明：默认值是0，表示不会有过渡效果。1、过渡效果语法：transition-duration:time;课堂练习1-17-1制作颜色区域的扩展效果HTML代码：CSS代码：123<div></div><p>请把鼠标指针移动到红色的div元素上，就可以看到过渡效果。</p>1234567891011121314151617div{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-为兼容SafariandChrome浏览器*/-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代码：12345<div></div><p>请把鼠标指针移动到红色的div元素上，就可以看到红色到黄色的过渡效果。</p>1234567891011121314151617div{width:300px;height:100px;background:#f00;transition-property:background;transition-duration:2s;-moz-transition-property:background;/*-moz-为兼容Firefox浏览器*/-moz-transition-duration:2s;-webkit-transition-property:background;/*-webkit-为兼容SafariandChrome浏览器*/-webkit-transition-duration:2s;-o-transition-property:background;/*-o-为兼容Opera浏览器*/-o-transition-duration:2s;}div:hover{background:#ff0;} 课堂练习1-17-1制作颜色区域的扩展效果显示效果如图1-17-4、图1-17-5、图1-17-6所示。图1-17-4过渡效果-鼠标未经过红色区域图1-17-6过渡效果-鼠标经过红色区域颜色最终过渡效果图1-17-5过渡效果-鼠标经过红色区域颜色过渡中知识与技能准备1.3transition-timing-functiontransition-timing-function属性规定过渡效果的速度曲线。语法：transition-timing-function:属性值;1、过渡效果表1-17-2transition-timing-function属性值语法：transition-timing-function:属性值;课堂练习1-17-3制作区域的过渡速度效果HTML代码：123456<divid="div1">设置属性值linear</div><divid="div2">设置属性值ease</div><divid="div3">设置属性值ease-in</div><divid="div4">设置属性值ease-out</div><divid="div5">设置属性值ease-in-out</div><p>请把鼠标指针移动到红色的div元素上，就可以看到过渡的不同速度效果。</p>课堂练习1-17-3制作区域的过渡速度效果CSS代码：CSS代码：12345678910111213141516171819202122div{width:100px;height:50px;margin:10px;background:blue;color:white;font-weight:bold;transition-property:width;-moz-transition-property:width;-webkit-transition-property:width;-o-transition-property:width;transition-duration:2s;-moz-transition-duration:2s;-webkit-transition-duration:2s;-o-transition-duration:2s;}#div1{transition-timing-function:linear;}#div2{transition-timing-function:ease;}#div3{transition-timing-function:ease-in;}#div4{transition-timing-function:ease-out;}#div5{transition-timing-function:ease-in-out;}2324252627282930313233343536373839404142/*-moz-为兼容Firefox浏览器*/#div1{-moz-transition-timing-function:linear;}#div2{-moz-transition-timing-function:ease;}#div3{-moz-transition-timing-function:ease-in;}#div4{-moz-transition-timing-function:ease-out;}#div5{-moz-transition-timing-function:ease-in-out;}/*-webkit-为兼容SafariandChrome浏览器*/#div1{-webkit-transition-timing-function:linear;}#div2{-webkit-transition-timing-function:ease;}#div3{-webkit-transition-timing-function:ease-in;}#div4{-webkit-transition-timing-function:ease-out;}#div5{-webkit-transition-timing-function:ease-in-out;}/*-o-为兼容Opera浏览器*/#div1{-o-transition-timing-function:linear;}#div2{-o-transition-timing-function:ease;}#div3{-o-transition-timing-function:ease-in;}#div4{-o-transition-timing-function:ease-out;}#div5{-o-transition-timing-function:ease-in-out;}div:hover{width:300px;}课堂练习1-17-3制作区域的过渡速度效果显示效果如图1-17-7、图1-17-8所示。图1-17-7过渡效果-鼠标未经过蓝色区域图1-17-8过渡效果-鼠标经过蓝色区域体验不同过渡速度知识与技能准备1.4transition-delaytransition-delay属性规定过渡效果何时开始。transition-delay值以秒或毫秒计。1.5transitiontransition属性是一个简写属性，一般情况下，四个过渡属性：transition-property、transition-duration、transition-timing-function、transition-delay经常出现，为了避免代码过于冗长，可以采用简写的形式。注意：（1）使用transition属性设置多个过渡效果时，必须按照严格按照transition-property、transition-duration、transition-timing-function、transition-delay的顺序进行定义，顺序不能互换。（2）务必始终设置transition-duration属性，否则默认时长为0，就不会产生过渡效果。（3）如果同时设置多个过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号隔开。1、过渡效果语法：transition-delay：time;语法：transition:propertydurationtiming-functiondelay;课堂练习1-17-4采用简写属性制作过渡效果HTML代码：1<div>效果3</div>CSS代码：1234567891011121314div{transition:background-color2sease-in1ms,box-shadow2sease-in1ms,color2sease-in1ms;width:100px;height:20px;border-radius:10px;text-align:center;padding:5px0;border:5pxrgb(204,102,255)solid;background-color:rgba(204,102,255,1);box-shadow:0000rgba(204,102,255,1); color:#FFF;}div:hover{background-color:rgba(204,102,255,0);box-shadow:00010pxrgba(204,102,255,0);color:rgb(204,102,255);}显示效果如图1-17-9所示。图1-17-9采用简写属性制作过渡效果知识与技能准备通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，对元素进行移动、缩放、转动、拉长或拉伸，达到变形的效果。变形效果可以使用2D或3D转换实现。2.12D转换代码格式：transform:变形方式(参数);下面介绍各种变形方式：（1）平移translate通过translate（）方法，元素根据给定的left（x坐标）和top（y坐标）位置参数进行移动。（2）旋转rotate旋转变形可让标签旋转指定的角度，格式：rotate(角度)通过rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。2、变形效果语法：transform:translate(x轴的参数,y轴的参数);语法：transform:rotate(角度)课堂练习1-17-4采用简写属性制作过渡效果HTML代码：1<div></div>CSS代码：12345678910div{width:200px;height:200px;margin:50pxauto;background:#0F0;transition:all2s;}div:hover{transform:translate(-100px,200px);}显示效果如图1-17-10所示。图1-17-10鼠标经过区域时，区域的平移效果课堂练习1-17-6设置区域的旋转效果HTML代码：1234<divid="main"><divclass="div1"></div><divclass="div2"></div><divclass="clear"></div>5678<divclass="div3"></div><divclass="div4"></div><divclass="clear"></div></div>CSS代码：123456789101112#main{width:500px;margin:50pxauto;}.div1,.div2,.div3,.div4{height:200px;width:200px;background:#FF0;}.div1{transform:rotate(30deg);float:left;}.div2{transform:rotate(-30deg);float:right;}131415161718192021.clear{clear:both;}.div3{margin:100px000;transform:rotate(60deg);float:left;}.div4{margin:100px000;transform:rotate(-60deg);float:right;}课堂练习1-17-6设置区域的旋转效果显示效果如图1-17-11所示。图1-17-11设置区域的旋转效果知识与技能准备（3）缩放scale通过scale()方法，元素的尺寸会根据给定的宽度（X轴）和高度（Y轴）参数增加或减少。（4）倾斜skew通过skew()方法，元素根据给定的水平线（X轴）和垂直线（Y轴）参数进行角度翻转。2、变形效果语法：transform:skew(x轴的参数,y轴的参数);语法：transform:scale(水平缩放，垂直缩放);课堂练习1-17-7设置区域的缩放效果HTML代码：1<div></div>CSS代码：123456789div{width:200px;height:200px;margin:50pxauto;background:#00F;transition:all2s;}div:hover{transform:scale(2,0.5);}显示效果如图1-17-12和图1-17-13所示。图1-17-12缩放效果-鼠标未经过区域图1-17-13鼠标经过区域的最终缩放效果课堂练习1-17-8设置区域的倾斜效果HTML代码：1<div></div>CSS代码：12345678div{width:200px;height:200px;margin:150pxauto;background:#F30;transition:all2s;}div:hover{transform:skew(30deg,45deg);}显示效果如图1-17-14和图1-17-15所示。图1-17-14倾斜效果-鼠标未经过区域图1-17-15鼠标经过区域的最终倾斜效果知识与技能准备2.23D转换2D转换主要是通过X轴和Y轴来进行变形，而3D转换主要是通过X轴、Y轴和Z轴来进行对元素的格式化。（1）rotateX()通过rotateX()方法，元素围绕其X轴以给定的度数进行旋转。（2）rotateY()通过rotateY()方法，元素围绕其Y轴以给定的度数进行旋转。2、变形效果课堂练习1-17-9设置3D转换效果-X轴HTML代码：1<div>你好，将进行3D转换。</div>CSS代码：123456789div{width:300px;height:100px;background-color:green;border:1pxsolidblack;}div:hover{transform:rotateX(135deg);-webkit-transform:rotateX(135deg);-moz-transform:rotateX(135deg);}显示效果如图1-17-16和图1-17-17所示。图1-17-16设置3D转换效果-X轴-鼠标未经过区域图1-17-17设置3D转换效果-X轴-鼠标经过区域课堂练习1-17-10设置3D转换效果-X轴HTML代码：1<div>你好，将进行3D转换。</div>CSS代码：123456789div{width:300px;height:100px;background-color:green;border:1pxsolidblack;}div:hover{transform:rotateY(120deg);-webkit-transform:rotateY(120deg);-moz-transform:rotateY(120deg);}显示效果如图1-17-16和图1-17-17所示。图1-17-18设置3D转换效果-Y轴-鼠标未经过区域图1-17-19设置3D转换效果-Y轴-鼠标经过区域知识与技能准备动画效果可以通过@keyframes规则来创建。在@keyframes中定义某种CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。动画效果可用于制作一些简单的动态效果或广告。动画效果的代码由两部分组成，第一部分为标签声明动画效果：注意：以上语法中，动画名称和执行时间必须存在，否则动画不会播放。第二部分设置动画的实际效果：请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是动画的开始，100%是动画的结束。为了得到最佳的