css实现经典三维折叠导航菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现经典三维折叠导航菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
@font-face {
  font-family: 'Superguns';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Superguns.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Superguns.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
body .ui_inner, body .ui_inner__item, body .ui_inner__item h2 {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

body .scanlines, body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6), body .ui #item-1:checked + input + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7), body .ui_inner__item h2, body .ui_inner__item .item_active__part, body .ui_inner__item .item_active__part h3 {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

body .ui_inner__item::after, body .ui_inner__item::before {
  width: 400px;
  height: 40px;
  background: #032035;
  position: absolute;
  top: 0;
  display: block;
  content: '';
  -webkit-backface-visibility: none;
          backface-visibility: none;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

body .ui_inner__item .item_active__part, body .ui_inner__item .item_top, body .ui_inner__item .item_bottom {
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-bottom: 346.410161514px solid #032035;
  -webkit-transform: translateY(-346.410161514px) rotateX(90deg);
          transform: translateY(-346.410161514px) rotateX(90deg);
  -webkit-backface-visibility: none;
          backface-visibility: none;
  position: absolute;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transition: all 0.0s;
  transition: all 0.0s;
}

body .ui_inner__item .item_active__part {
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 346.410161514px solid #032035;
  border-bottom: 0;
}

body {
  background: #021013;
  overflow: hidden;
  font-family: 'Superguns';
  letter-spacing: 1px;
  margin: 0;
}
body .scanlines {
  background-image: repeating-linear-gradient(180deg, transparent, transparent 3px, rgba(224, 167, 167, 0.03) 9px, rgba(255, 255, 255, 0.1) 9px);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 1;
}
body .intro_wrap {
  height: 100vh;
  -webkit-transition: opacity 0.2s 1.7s, left 0.4s 1.7s;
  transition: opacity 0.2s 1.7s, left 0.4s 1.7s;
  position: relative;
  left: 0;
}
body .intro {
  position: absolute;
  width: 370px;
  left: -530px;
  font-family: 'Nunito', sans-serif;
  right: 0;
  margin: auto;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
body .intro img {
  width: 150px;
  margin-top: 17px;
}
body .intro .gif {
  margin-top: 14px;
  border: 2px solid white;
  border-radius: 4px;
  width: 250px;
}
body .intro h1 {
  color: #bf9a7c;
  font-size: 16px;
  margin: 10px 0 0;
}
body .intro h2 {
  margin: 0;
  font-size: 14px;
  color: #51b8d8;
}
body .intro p {
  color: #c8cdc4;
  font-size: 12px;
}
body .ui {
  -webkit-perspective: 1300px;
          perspective: 1300px;
  height: 100%;
  opacity: 0;
  -webkit-animation: fadeIn 2.5s 0.3s forwards;
          animation: fadeIn 2.5s 0.3s forwards;
}
body .ui #item-6:checked + div {
  opacity: 0;
  left: -100px;
  -webkit-transition: opacity 0.2s, left 0.4s;
  transition: opacity 0.2s, left 0.4s;
}
body .ui #item-6:checked + div + div {
  -webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
          transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
  top: -350px;
  left: 0;
}
body .ui #item-6:checked + div + div > .ui_inner__item {
  -webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
          transform: translateY(calc(50vh - 2100px)) translateX(-200px);
}
body .ui #item-6:checked + div + div > .ui_inner__item label {
  -webkit-transition: background 0.6s 5s;
  transition: background 0.6s 5s;
  -webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
          transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
  background: #000000b3;
  width: 160px;
  padding: 20px;
  border-radius: 6px;
}
body .ui #item-6:checked + div + div > .ui_inner__item label span {
  opacity: 1;
  -webkit-transition: all 0.6s 5s;
  transition: all 0.6s 5s;
}
body .ui #item-6:checked + div + div > .ui_inner__item:hover {
  background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
}
body .ui #item-6:checked + div + div > .ui_inner__item:hover .item_top, body .ui #item-6:checked + div + div > .ui_inner__item:hover .item_bottom {
  border-bottom: 346.410161514px solid #033520;
}
body .ui #item-6:checked + div + div > .ui_inner__item:hover::after, body .ui #item-6:checked + div + div > .ui_inner__item:hover::before {
  background: -webkit-linear-gradient(left, #021013 30%, #033520 70%, #021013 100%);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap .item_active:after {
  -webkit-transition: all 1s 5s;
  transition: all 1s 5s;
  opacity: 1;
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
  -webkit-transform: translateX(-246px);
          transform: translateX(-246px);
  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
          animation: fadeIn 0.5s 1.7s forwards !important;
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
          animation: fadeIn 0.5s 1.7s forwards !important;
}
@-webkit-keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part .nodes {
  -webkit-animation: fadeIn 0.5s 2.5s forwards;
          animation: fadeIn 0.5s 2.5s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part .nodes {
  -webkit-animation: fadeIn 0.5s 3s forwards;
          animation: fadeIn 0.5s 3s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part .nodes {
  -webkit-animation: fadeIn 0.5s 3.5s forwards;
          animation: fadeIn 0.5s 3.5s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part .nodes {
  -webkit-animation: fadeIn 0.5s 4s forwards;
          animation: fadeIn 0.5s 4s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part .nodes {
  -webkit-animation: fadeIn 0.5s 4.5s forwards;
          animation: fadeIn 0.5s 4.5s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part .nodes {
  -webkit-animation: fadeIn 0.5s 5s forwards;
          animation: fadeIn 0.5s 5s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
  -webkit-animation: fadeIn 0.5s 5.5s forwards;
          animation: fadeIn 0.5s 5.5s forwards;
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part {
  opacity: 0;
  -webkit-animation: flip 0.5s 2.5s forwards;
          animation: flip 0.5s 2.5s forwards;
  -webkit-backface-visibility: none;
          backface-visibility: none;
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
  -webkit-transform: rotateY(-60deg);
          transform: rotateY(-60deg);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part {
  opacity: 0;
  -webkit-animation: flip 0.5s 3s forwards;
          animation: flip 0.5s 3s forwards;
  -webkit-backface-visibility: none;
          backface-visibility: none;
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
  -webkit-transform: rotateY(-120deg);
          transform: rotateY(-120deg);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part {
  opacity: 0;
  -webkit-animation: flip 0.5s 3.5s forwards;
          animation: flip 0.5s 3.5s forwards;
  -webkit-backface-visibility: none;
          backface-visibility: none;
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part {
  opacity: 0;
  -webkit-animation: flip 0.5s 4s forwards;
          animation: flip 0.5s 4s forwards;
  -webkit-backface-visibility: none;
          backface-visibility: none;
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
  -webkit-transform: rotateY(-240deg);
          transform: rotateY(-240deg);
}
body .ui #item-6:checked + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part {
  opacity: 0;
  -webkit-animation: flip 0.5s 4.5s forwards;
          animation: flip 0.5s 4.5s forwards;
  -webkit-backface-visibility: none;
          backface-visibility: none;
}
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) {
  -webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
          transform: translateY(calc(50vh + 100px)) translateX(-200px);
  -webkit-animation: flash-6 0.3s linear;
          animation: flash-6 0.3s linear;
}
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) h2 {
  -webkit-transition: opacity 0.2s 1.4s;
  transition: opacity 0.2s 1.4s;
}
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) .item_top, body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(6) .item_bottom {
  -webkit-animation: flashTop-6 0.3s linear;
          animation: flashTop-6 0.3s linear;
}
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(7) {
  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(8) {
  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(9) {
  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(10) {
  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-6:checked + div + div > .ui_inner__item:nth-of-type(11) {
  -webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
          transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-6:checked + div + div > .ui_inner__item h2 {
  opacity: 0;
}
body .ui #item-5:checked + input + div {
  opacity: 0;
  left: -100px;
  -webkit-transition: opacity 0.2s, left 0.4s;
  transition: opacity 0.2s, left 0.4s;
}
body .ui #item-5:checked + input + div + div {
  -webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
          transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
  top: -300px;
  left: 0;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item {
  -webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
          transform: translateY(calc(50vh - 2100px)) translateX(-200px);
}
body .ui #item-5:checked + input + div + div > .ui_inner__item label {
  -webkit-transition: background 0.6s 5s;
  transition: background 0.6s 5s;
  -webkit-transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
          transform: rotatey(60deg) rotatex(90deg) translatex(149px) translateZ(70px) translateY(295px);
  background: #000000b3;
  width: 160px;
  padding: 20px;
  border-radius: 6px;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item label span {
  opacity: 1;
  -webkit-transition: all 0.6s 5s;
  transition: all 0.6s 5s;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item:hover {
  background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
}
body .ui #item-5:checked + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-5:checked + input + div + div > .ui_inner__item:hover .item_bottom {
  border-bottom: 346.410161514px solid #033529;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item:hover::after, body .ui #item-5:checked + input + div + div > .ui_inner__item:hover::before {
  background: -webkit-linear-gradient(left, #021013 30%, #033529 70%, #021013 100%);
}
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap .item_active:after {
  -webkit-transition: all 1s 5s;
  transition: all 1s 5s;
  opacity: 1;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3 {
  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
}
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3 {
  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
}
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3 {
  -webkit-transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
          transform: translateX(-246px) rotateY(0deg) rotateX(180deg);
}
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3 {
  -webkit-transform: translateX(-246px);
          transform: translateX(-246px);
  -webkit-animation: fadeIn 0.5s 1.7s forwards !important;
          animation: fadeIn 0.5s 1.7s forwards !important;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part .nodes {
  -webkit.........完整代码请登录后点击上方下载按钮下载查看