当前位置: 首页 > Web前端 > HTML5

使用transform实现一个纯CSS弹窗菜单

时间:2023-04-05 00:16:02 HTML5

前言在制作顶级菜单时,需要制作一个弹出的二级菜单。之前的方法是使用jQuery来控制二级菜单的显示和过渡动画,但是在使用了CSS3中的transform属性之后,这一切都变得不正常了简单的初上效果制作方法的核心是使用区域位移的方法的transform,配合li标签的hover伪类和动画延迟,简单实现子菜单

*{填充:0;保证金:0;框大小:边框框;}body{宽度:100vw;高度:100vh;显示:弹性;弹性方向:列;证明内容:flex-start;边距:10px;}navul{列表样式类型:无;高度:32px;显示:弹性;}navulli{margin-right:10px;}navullistrong{文本转换:大写;背景色:#9b59b6;白颜色;填充:5px30px;行高:30px;游标:指针;}navullistrong+div{display:flex;弹性方向:列;背景色:#3498db;填充:10px;变换:翻译Y(-110%);不透明度:0;过渡:.3s;变换原点:顶部;}navulli:hoverdiv{transform:translateY(0);不透明度:1;}navullistrong+diva{颜色:白色;文字修饰:无;文本转换:大写;填充:5px0;}