Web前端开发基础创新实践教程课件：制作下拉式导航菜单.pptxVIP

Createadropdownnavigationmenu制作下拉式导航菜单前端开发技术基础FundamentalsofWebFrontendTechnology

web前端技术基础1过渡属性CSS中用于设置过渡特效的属性是transition，该属性控制元素的属性值在一定的时间区间内由A状态过渡到B状态。属性描述示例transition-property规定应用过渡的CSS属性的名称transition-property:width，指定宽度过渡transition-duration定义过渡效果花费的时间，默认是0transition-duration:1s,指定过渡时间为1秒transition-timing-function规定过渡效果的时间曲线，默认是easetransition-timing-function:linear,指定切换效果匀速transition-delay规定过渡效果何时开始，默认是0transition-delay:1s,指定过渡效果延时1秒启动

web前端技术基础1.2过渡效果的时间曲线transition-timing-function定义过渡效果的时间曲线。值描述cubic-bezier(n,n,n,n)在cubic-bezier（贝塞尔曲线）函数中定义，参数为0至1之间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)

web前端技术基础1.3transition属性transition属性是综合transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性的复合属性。transition属性语法格式如下：transition:propertydurationtiming-functiondelay;style #test{width:100px;height:100px;background-color:brown;}#test:hover{width:300px;color:#dc131d;background-color:aqua;transition:allease1s;}/style

web前端技术基础经验小贴士display属性也可以用于控制盒子的显示和隐藏，当值为none时，盒子为隐藏状态，值为block时，为显示状态。但display属性不能用于设置过渡效果。通常可以通过列表li的嵌套来实现级联菜单效果，关键步骤是将CSS样式设置为父元素li的hover状态下子元素的效果（li：hoveritem{display}）。12

web前端技术基础任务实践一级导航栏用flex布局实现横向均匀分布，整体居中对齐，呈现阴影效果，四个角为圆角。二级菜单要求采用级联菜单方式，用过渡样式控制二级菜单的显示和隐藏，响应时间为0.5秒，每个二级菜单设置鼠标响应效果，当鼠标移到菜单上时呈半透明背景效果。整体效果如图所示。任务要求

谢谢观看FundamentalsofWebFrontendTechnology前端开发技术基础Createadropdownnavigationmenu