css实现自适应多彩全屏菜单弹出动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现自适应多彩全屏菜单弹出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* $bg-01: #364e68; $bg-02: #446d8c; $bg-03: #5788a0; $bg-04: #73a5b5; */ body { margin: 0; font-family: "Barlow", sans-serif; background-color: #f1f3f7; } ul { margin: 0; padding: 0; } ul li { list-style: none; } a { text-decoration: none; color: white; } /* Navigation */ nav { /* Nav Bar */ /* Main Nav */ } nav .menubar { width: 100%; height: 80px; position: absolute; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; box-sizing: border-box; background-color: white; box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.3); /* Logo */ /* Icons */ } @media screen and (max-width: 767px) { nav .menubar { height: 60px; padding: 0 20px; } } nav .menubar .home { font-size: 20px; font-weight: 600; color: #c05c7e; transition: all 0.4s ease; } nav .menubar .home:hover { opacity: 0.5; } nav .menubar .icons { display: flex; /* Icon Menu Hamburguer */ /* Secondary Icons */ } nav .menubar .icons .icon-menu { display: flex; width: 30px; height: 30px; z-index: 2; position: relative; display: flex; align-items: center; cursor: pointer; padding: 5px; /* Icon Close */ } nav .menubar .icons .icon-menu span { background-color: #c05c7e; width: 30px; height: 3px; position: absolute; display: flex; justify-content: flex-end; transition: all 0.2s ease; right: 0; border-radius: 5px; } nav .menubar .icons .icon-menu span:before, nav .menubar .icons .icon-menu span:after { position: absolute; content: ""; width: 100%; height: 100%; background-color: #c05c7e; border-radius: 5px; } nav .menubar .icons .icon-menu span:before { transform: translateY(-10px); transition: all 0.3s 0.1s ease; } nav .menubar .icons .icon-menu span:after { transform: translateY(10px); transition: all 0.3s 0.2s ease; } nav .menubar .icons .icon-menu:hover span { width: 30px; } nav .menubar .icons .icon-menu:hover span:before { width: 25px; } nav .menubar .icons .icon-menu:hover span:after { width: 20px; } nav .menubar .icons .icon-menu.icon-closed { justify-content: center; } nav .menubar .icons .icon-menu.icon-closed span { background-color: white; justify-content: center; width: 0px; right: initial; opacity: 0.5; transition: all 0.6s ease; } nav .menubar .icons .icon-menu.icon-closed span:before, nav .menubar .icons .icon-menu.icon-closed span:after { width: 30px; background-color: white; } nav .menubar .icons .icon-menu.icon-closed span:before { transform: rotate(45deg); } nav .menubar .icons .icon-menu.icon-closed span:after { transform: rotate(-45deg); } nav .menubar .icons .icon-menu.icon-closed:hover span { width: 0; opacity: 1; } @media screen and (max-width: 767px) { nav .menubar .icons .icon-menu.icon-closed:hover span:before { transform: rotate(45deg); } nav .menubar .icons .icon-menu.icon-closed:hover span:after { transform: rotate(-45deg); } } nav .menubar .icons .secondary-icons { display: flex; flex-wrap: wrap; } nav .menubar .icons .secondary-icons .icon-second { width: 30px; height: 30px; margin: 0 10px; cursor: pointer; transition: all 0.3s ease; padding: 5px; } @media screen and (max-width: 767px) { nav .menubar .icons .secondary-icons .icon-second { margin: 5px; } } nav .menubar .icons .secondary-icons .icon-second:last-child { margin-right: 30px; } @media screen and (max-width: 767px) { nav .menubar .icons .secondary-icons .icon-second:last-child { margin-right: 15px; } } nav .menubar .icons .secondary-icons .icon-second:hover { transform: translateY(-5px); opacity: 0.5; } @media screen and (max-width: 767px) { nav .menubar .icons .secondary-icons .icon-second:hover { transform: translateY(0px); opacity: 1; } } nav .menu { display: none; /* Open Menu */ /* Animation - Close */ } nav .menu.open { display: flex; z-index: 3; overflow: hidden; /* Menu Open - Main Link */ } nav .menu.open .menu-link { width: 25%; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: all 0.4s ease-in-out; animation: menu 0.6s ease forwards; height: 100vh; position: relative; /* Main Link - text */ /* Sub Menu */ /* Menu Links - Hover */ } @keyframes menu { 0% { height: 0; transform: translatey(-50%); } 100% { height: 100vh; transform: translatey(0%); } } nav .menu.open .menu-link:nth-child(1) { background-color: #2d3561; animation-duration: 0.6s; } nav .menu.open .menu-link:nth-child(2) { background-color: #c05c7e; animation-duration: 0.8s; } nav .menu.open .menu-link:nth-child(3) { background-color: #f3826f; animation-duration: 1s; } nav .menu.open .menu-link:nth-child(4) { background-color: #ffb961; animation-duration: 1.2s; } nav .menu.open .menu-link .text-item { color: white; text-transform: uppercase; font-weight: 800; font-size: 40px; opacity: 0.3; width: 100%; height: 20%; letter-spacing: 5px; transform: rotate(-90deg) translateX(0px); transition: all 0.4s 0.2s ease-in-out, letter-spacing 0.2s ease-in, opacity 0.2s ease-in; display: flex; justify-content: center; align-items: center; flex-direction: column; transform-origin: center; animation: text-in 0.6s ease; position: absolute; } @media screen and (max-width: 767px) { nav .menu.open .menu-link .text-item { transform: rotate(0deg); font-size: 30px; } } @keyframes text-in { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 0.3; } } nav .menu.open .menu-link .text-item .icon { position: absolute; display: flex; width: 30px; height: 30px; opacity: 0; transform: translateY(0px); transition: all 0.4s ease-in-out; background-image: url(../../../../../../rafaelalucas91.github.io/assets/icons/white/icon-54.svgg"); } @media screen and (max-width: 767px) { nav .menu.open .menu-link .text-item .icon { opacity: 0.5; transform: translateY(40px); } } nav .menu.open .menu-link .submenu { display: flex; flex-direction: column; justify-content: center; padding: 0 40px; box-sizing: border-box; opacity: 0; z-index: -1; transition: all 0.6s ease-in-out; height: 0%; width: 100%; background-color: rgba(255, 255, 255, 0.1); bottom: 0; transform: translateY(50%); position: absolute; } @media screen and (max-width: 767px) { nav .menu.open .menu-link .submenu { padding: 0 5%; } } nav .menu.open .menu-link .submenu .sub-item { display: none; margin: 10px 0; color: white; text-transform: uppercase; letter-spacing: 2px; font-size: 20px; font-weight: 600; position: relative; width: fit-content; cursor: pointer; padding: 5px 15px; } @media screen and (max-width: 767px) { nav .menu.open .menu-lin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0