호버 애니메이션이 포함된 전체 화면 메뉴 - 단계별 가이드

HTML

HTML의 경우 메뉴 항목 목록이 있는 컨테이너가 필요합니다.

<div class="container">
    <ul class="menu">
        <li class="menu-item">HOME</li>
        <li class="menu-item">WELCOME</li>
    </ul>
</div>

CSS

CSS의 경우 먼저 컨테이너의 스타일을 지정합니다.

위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 0으로 설정하여 전체 화면을 가리켜 절대적인 위치에 배치합니다.

그런 다음 flexbox를 사용하여 목록을 중앙에 배치하고 배경색을 보라색으로 설정합니다.

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(167, 118, 221);
}

이제 목록의 스타일을 지정합니다.

패딩 및 목록 스타일 유형을 제거하십시오.

또한 열에 메뉴 항목을 표시합니다.

.menu {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

이제 manu 항목의 스타일을 지정해 보겠습니다.

너비, 높이 및 글꼴 크기를 설정합니다.

이제 flexbox를 사용하여 중앙에 텍스트를 표시하고 호버 효과(나중에 추가할 예정)가 부드럽게 전환되도록 전환을 설정합니다.

물론 커서를 포인터와 약간 투명한 텍스트 색상으로 설정합니다.

.menu-item {
    height: 70px;
    width: 100vw;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease-in;
    cursor: pointer;
    color: rgba(0,0,0,.4);
}

가리키면 글꼴 크기를 늘리고 색상을 흰색으로 설정합니다.

약간의 텍스트 그림자를 추가하고 글꼴 두께를 늘립니다.

전환을 통해 이 변경은 멋지고 매끄럽게 될 것입니다.

.menu-item:hover {
    font-size: 35px;
    transition: .3s ease-out;
    color: #fff;
    text-shadow: 0px 0px 50px rgb(161, 95, 232);
    font-weight: 600;
}

그리고 그게 다야.

전체 코드 및 비디오 자습서here를 얻을 수 있습니다.

읽어 주셔서 감사합니다. ❤️