文章预览
汉堡包按钮 & 动态阴影 汉堡包按钮 显示一个汉堡包菜单,在悬停时过渡到十字按钮。 使用一个 .hamburger-menu 容器 div ,其中包含顶部、底部和中间的条。 将容器设置为 display: flex , flex-flow: column wrap 。 使用 justify-content: space-between 在条之间添加距离。 使用 transform: rotate() 将顶部和底部的条旋转 45 度,使用 opacity: 0 在悬停时使中间的条淡出。 使用 transform-origin: left ,以便条围绕左点旋转。 < div class = "hamburger-menu" > < div class = "bar top" > div > < div class = "bar middle" > div > < div class = "bar bottom" > div > div > ``` ```css .hamburger-menu { display: flex; flex-flow: column wrap; justify-content: space-between; height: 2.5rem; width: 2.5rem; cursor: pointer; } .hamburger-menu .bar { height: 5px; background: black; border-radius: 5px; margin: 3px 0px; transform-origin: left; transit
………………………………
