jquery打造动画菜单logo切换效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Logo Hamburger Menu</title> <style> body { height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .menu-cont { height:100vh; width: 100vw; display: flex; justify-content: center; align-items: center; background: black; } .menu { display: flex; flex-direction: column; align-items: center; width: 100%; cursor: pointer; transition: .3s; } .menu-toggle { display: flex; flex-direction: column; align-items: center; width: auto; cursor: pointer; position: relative; left: 5px; top: 5px; transform: scale(.4); } .line1 { width: 40px; height: 5px; background: white; margin: 2px 0; transition: .5s; } .line1-toggle { width: 30px; height: 50px; background: transparent; transform: rotate(90deg) skew(-35deg, 0deg) translate(48px,-15px); border: 10px solid white; transition: .5s; border-radius: 3px; border-bottom-left-radius: 7px; border-top-right-radius: 7px; } .line2 { width: 30px; height: 5px; background: white; margin: 2px 0; transition: .5s; } .line2-toggle { width: 30px; height: 50px; background: transparent; transform: rotate(90deg) skew(35deg, 0deg) translate(-51px, 51px); border: 10px solid white; transition: .5s; border-radius: 5px; border-top-left-radius: 7px; } .line3{ width: 40px; height: 5px; backgro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0