[해피CGI][cgimall] Death Stranding inspired menu

 Death Stranding 게임의 메뉴 디자인에 영감을 받아 제작된 메뉴 디자인 입니다.

마우스 오버시 메뉴에 애니메이션 배경이 출력됩니다.

자세한 내용은 데모를 확인해 주시기 바랍니다.

HTML

<main>   <nav>     <a href="#">       <span class="content">Menu 1</span>       <span class="l"></span>       <span class="r"></span>     </a>     <a href="#">       <span class="content">Menu 2</span>       <span class="l"></span>       <span class="r"></span>     </a>     <a href="#">       <span class="content">Menu 3</span>       <span class="l"></span>       <span class="r"></span>     </a>     <a href="#">       <span class="content">Menu 4</span>       <span class="l"></span>       <span class="r"></span>     </a>   </nav>   <div class="overlay"></div> </main>

 

CSS

main {   display: grid;   place-items: center;   height: 100svh;   perspective: 90vw;   background: #1b1b1b; }   .overlay {   position: absolute;   inset: 0;   background: radial-gradient(circle, #fff 1px, #fff0 1px) 10px 10px/ 10px     10px;   transform: rotateY(-12deg);   pointer-events: none;   opacity: 0.18;   mix-blend-mode: overlay; }   nav {   display: flex;   gap: 1rem;   padding: 1rem 2rem;   transform: rotateY(-12deg);     a {     --w: 3px;     position: relative;     display: grid;     grid-template-columns: repeat(2, 1fr);     grid-template-rows: auto;     text-decoration: none;     color: #fff;       &:before {       content: "";       display: block;       position: absolute;       inset: 0 -50%;       background: #014d89;       pointer-events: none;       opacity: 0;     }       span {       grid-row: 1;     }       span.l {       grid-column: 1 / 1;       z-index: 1;     }       span.r {       grid-column: 2 / 2;       z-index: 1;     }          span:where(.l, .r) {       &:hover {         grid-column: -1 / 1;         z-index: 2;       }     }       span.content {       display: block;       padding: 1em 2em;       grid-column: -1 / 1;       z-index: 1;     }       &:after {       content: "";       display: block;       grid-column: -1 / 1;       grid-row: 1;       inset: 0;       z-index: 0;       background: linear-gradient(             #fff var(--w),             #fff0 var(--w),             #fff0 calc(100% - var(--w)),             #fff calc(100% - var(--w))           )           calc(var(--w) * -1) 0 / calc(var(--w) * 2.5) no-repeat,         linear-gradient(             #fff var(--w),             #fff0 var(--w),             #fff0 calc(100% - var(--w)),             #fff calc(100% - var(--w))           )           calc(var(--w) + 100%) 0 / calc(var(--w) * 2.5) no-repeat;     }       &:has(span.l:hover):before {       animation: enter-hover-left 160ms forwards steps(2),         blink 1200ms ease-in 114ms infinite;     }       &:has(span.r:hover):before {       animation: enter-hover-right 160ms forwards steps(2),         blink 1200ms ease-in 114ms infinite;     }   } }   @keyframes enter-hover-left {   from {     opacity: 0.5;     clip-path: polygon(0 0, 25% 0, 25% 100%, 0 100%);   }     25% {     clip-path: polygon(0 0, 75% 0, 25% 100%, 0 100%);   }     50% {     clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);   }     75% {     clip-path: polygon(0 0, 75% 0, 75% 100%, 25% 100%);   }     to {     opacity: 1;     clip-path: polygon(25% 0, 75% 0, 75% 100%, 25% 100%);   } }   @keyframes enter-hover-right {   from {     opacity: 0.5;     clip-path: polygon(75% 0, 100% 0, 100% 100%, 75% 100%);   }     25% {     clip-path: polygon(25% 0, 100% 0, 100% 100%, 75% 100%);   }     50% {     clip-path: polygon(25% 0, 75% 0, 100% 100%, 75% 100%);   }     75% {     clip-path: polygon(25% 0, 75% 0, 75% 100%, 75% 100%);   }     to {     opacity: 1;     clip-path: polygon(25% 0, 75% 0, 75% 100%, 25% 100%);   } }   @keyframes blink {   from {     filter: brightness(1.5);   }     80%,   to {     filter: brightness(1);   } }