css实现经典三维折叠导航菜单效果代码
代码语言：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-animation: fadeIn 0.5s 1.7s forwards !important;
animation: fadeIn 0.5s 1.7s forwards !important;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
body .ui #item-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
-webkit-transform: rotateY(-60deg);
transform: rotateY(-60deg);
}
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
-webkit-transform: rotateY(-120deg);
transform: rotateY(-120deg);
}
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
-webkit-transform: rotateY(-240deg);
transform: rotateY(-240deg);
}
body .ui #item-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) {
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
transform: translateY(calc(50vh + 100px)) translateX(-200px);
-webkit-animation: flash-5 0.3s linear;
animation: flash-5 0.3s linear;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) h2 {
-webkit-transition: opacity 0.2s 1.4s;
transition: opacity 0.2s 1.4s;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) .item_top, body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(5) .item_bottom {
-webkit-animation: flashTop-5 0.3s linear;
animation: flashTop-5 0.3s linear;
}
body .ui #item-5:checked + input + div + div > .ui_inner__item:nth-of-type(6) {
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-5:checked + input + 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-5:checked + input + 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-5:checked + input + 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-5:checked + input + 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-5:checked + input + div + div > .ui_inner__item h2 {
opacity: 0;
}
body .ui #item-4:checked + input + input + div {
opacity: 0;
left: -100px;
-webkit-transition: opacity 0.2s, left 0.4s;
transition: opacity 0.2s, left 0.4s;
}
body .ui #item-4:checked + input + input + div + div {
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
top: -250px;
left: 0;
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item {
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
}
body .ui #item-4:checked + input + 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-4:checked + input + input + div + div > .ui_inner__item label span {
opacity: 1;
-webkit-transition: all 0.6s 5s;
transition: all 0.6s 5s;
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover {
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover .item_bottom {
border-bottom: 346.410161514px solid #033531;
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:hover::before {
background: -webkit-linear-gradient(left, #021013 30%, #033531 70%, #021013 100%);
}
body .ui #item-4:checked + input + 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-4:checked + input + 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-4:checked + input + 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-4:checked + input + 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-4:checked + input + 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-4:checked + input + input + 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;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
-webkit-transform: rotateY(-60deg);
transform: rotateY(-60deg);
}
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
-webkit-transform: rotateY(-120deg);
transform: rotateY(-120deg);
}
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
-webkit-transform: rotateY(-240deg);
transform: rotateY(-240deg);
}
body .ui #item-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) {
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
transform: translateY(calc(50vh + 100px)) translateX(-200px);
-webkit-animation: flash-4 0.3s linear;
animation: flash-4 0.3s linear;
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) h2 {
-webkit-transition: opacity 0.2s 1.4s;
transition: opacity 0.2s 1.4s;
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) .item_top, body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(4) .item_bottom {
-webkit-animation: flashTop-4 0.3s linear;
animation: flashTop-4 0.3s linear;
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(5) {
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-4:checked + input + input + div + div > .ui_inner__item:nth-of-type(6) {
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-4:checked + input + input + 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-4:checked + input + input + 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-4:checked + input + input + 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-4:checked + input + input + div + div > .ui_inner__item h2 {
opacity: 0;
}
body .ui #item-3:checked + input + input + input + div {
opacity: 0;
left: -100px;
-webkit-transition: opacity 0.2s, left 0.4s;
transition: opacity 0.2s, left 0.4s;
}
body .ui #item-3:checked + input + input + input + div + div {
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
top: -200px;
left: 0;
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item {
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
}
body .ui #item-3:checked + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item label span {
opacity: 1;
-webkit-transition: all 0.6s 5s;
transition: all 0.6s 5s;
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover {
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover .item_bottom {
border-bottom: 346.410161514px solid #033135;
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:hover::before {
background: -webkit-linear-gradient(left, #021013 30%, #033135 70%, #021013 100%);
}
body .ui #item-3:checked + input + input + 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-3:checked + input + input + 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-3:checked + input + input + 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-3:checked + input + input + 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-3:checked + input + input + 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-3:checked + input + input + input + 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;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
-webkit-transform: rotateY(-60deg);
transform: rotateY(-60deg);
}
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
-webkit-transform: rotateY(-120deg);
transform: rotateY(-120deg);
}
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
-webkit-transform: rotateY(-240deg);
transform: rotateY(-240deg);
}
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) {
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
transform: translateY(calc(50vh + 100px)) translateX(-200px);
-webkit-animation: flash-3 0.3s linear;
animation: flash-3 0.3s linear;
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) h2 {
-webkit-transition: opacity 0.2s 1.4s;
transition: opacity 0.2s 1.4s;
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) .item_top, body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(3) .item_bottom {
-webkit-animation: flashTop-3 0.3s linear;
animation: flashTop-3 0.3s linear;
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(4) {
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(5) {
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-3:checked + input + input + input + div + div > .ui_inner__item:nth-of-type(6) {
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-3:checked + input + input + input + 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-3:checked + input + input + input + 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-3:checked + input + input + input + div + div > .ui_inner__item h2 {
opacity: 0;
}
body .ui #item-2:checked + input + input + input + input + div {
opacity: 0;
left: -100px;
-webkit-transition: opacity 0.2s, left 0.4s;
transition: opacity 0.2s, left 0.4s;
}
body .ui #item-2:checked + input + input + input + input + div + div {
-webkit-transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
transform: rotatex(-30deg) rotateY(-60deg) translateZ(0);
top: -150px;
left: 0;
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item {
-webkit-transform: translateY(calc(50vh - 2100px)) translateX(-200px);
transform: translateY(calc(50vh - 2100px)) translateX(-200px);
}
body .ui #item-2:checked + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item label span {
opacity: 1;
-webkit-transition: all 0.6s 5s;
transition: all 0.6s 5s;
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover {
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover .item_top, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover .item_bottom {
border-bottom: 346.410161514px solid #032835;
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover::after, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:hover::before {
background: -webkit-linear-gradient(left, #021013 30%, #032835 70%, #021013 100%);
}
body .ui #item-2:checked + input + input + input + 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-2:checked + input + input + input + 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-2:checked + input + input + input + 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-2:checked + input + input + input + 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-2:checked + input + input + input + 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-2:checked + input + input + input + input + 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;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(2) .item_active__part h3,
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) .item_active__part h3,
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) .item_active__part h3,
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) .item_active__part h3,
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) .item_active__part h3,
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) .item_active__part h3,
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(8) .item_active__part h3,
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(3) {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(4) {
-webkit-transform: rotateY(-60deg);
transform: rotateY(-60deg);
}
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(5) {
-webkit-transform: rotateY(-120deg);
transform: rotateY(-120deg);
}
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(6) {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item .item_wrap:nth-of-type(7) {
-webkit-transform: rotateY(-240deg);
transform: rotateY(-240deg);
}
body .ui #item-2:checked + input + input + input + input + 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-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) {
-webkit-transform: translateY(calc(50vh + 100px)) translateX(-200px);
transform: translateY(calc(50vh + 100px)) translateX(-200px);
-webkit-animation: flash-2 0.3s linear;
animation: flash-2 0.3s linear;
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) h2 {
-webkit-transition: opacity 0.2s 1.4s;
transition: opacity 0.2s 1.4s;
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) .item_top, body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(2) .item_bottom {
-webkit-animation: flashTop-2 0.3s linear;
animation: flashTop-2 0.3s linear;
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(3) {
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-of-type(4) {
-webkit-transform: translateY(calc(-50% + 2100px)) translateX(-200px);
transform: translateY(calc(-50% + 2100px)) translateX(-200px);
}
body .ui #item-2:checked + input + input + input + input + div + div > .ui_inner__item:nth-o.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0