css实现三维分层汉堡菜单动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现三维分层汉堡菜单动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap"); html, body { height: 100%; } body { font-family: "Sigmar One", cursive; background: #ffcd98; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } h1 { font-size: 3rem; } #burger-menu-checkbox { position: absolute; left: -9999px; } .burger-menu { transform-style: preserve-3d; perspective: 2000px; height: 20vh; aspect-ratio: 1/1; } .burger-menu__ingredients { position: absolute; inset: 0; transform-style: preserve-3d; perspective: 2000px; transition: 500ms ease all; } .burger-menu__toggle { position: absolute; cursor: pointer; inset: 0; z-index: 1; transform: translateZ(10vh); transition: 500ms ease all; border-radius: 50%; } .burger-menu__toggle:after, .burger-menu__toggle:before { content: ""; position: absolute; top: 50%; left: 50%; margin-left: -5vh; margin-top: -0.75vh; width: 10vh; height: 1.5vh; color: #af651c; border-radius: 1vh; transition: 500ms ease all; box-shadow: inset 0 6vh; } .burger-menu__toggle:before { background: #af651c; box-shadow: inset 0 6vh, 0 -3vh, 0 3vh; } .burger-menu__toggle:hover:before, .burger-menu__toggle:hover:after { filter: brightness(0.5); } .burger-menu__toggle:hover ~ .burger-menu__ingredients { transform: translateY(-1vh) rotateX(10deg); } .burger-menu__slice { position: absolute; inset: 0; background: red; border-radius: 50%; transition: 500ms ease all; transition-delay: 250ms; } .burger-menu__slice:nth-child(0) { transform: translateZ(0vh); } .burger-menu__slice:nth-child(1) { transform: translateZ(-5vh); } .burger-menu__slice:nth-child(2) { transform: translateZ(-10vh); } .burger-menu__slice:nth-child(3) { transform: translateZ(-15vh); } .burger-menu__slice:nth-child(4) { transform: translateZ(-20vh); } .burger-menu__slice:nth-child(5) { transform: translateZ(-25vh); } .burger-menu__slice:nth-child(6) { transform: translateZ(-30vh); } .burger-menu__slice--bread { background: #ee851c; } .burger-menu__slice--lettuce { background: #a8e008; } .burger-menu__slice--tomatoes { background: #ea0802; } .burger-menu__slice--cheese { background: #ffdd42; } .burger-menu__slice--steak { background: #792b1c; } .burger-menu__slice a { position: absolute; opacity: 0; pointer-events: none; text-decoration: none; color: #000; t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0