순수 CSS를 사용하여 공이 직사각형 배경으로 바뀌는 버튼 호버 효과를 얻는 방법(소스 코드 첨부)-CSS 튜토리얼-php.cn

순수 CSS를 사용하여 공이 직사각형 배경으로 바뀌는 버튼 호버 효과를 얻는 방법(소스 코드 첨부)

不言

풀어 주다： 2018-09-04 09:28:15

원래의

2070명이 탐색했습니다.

이 글의 내용은 공이 직사각형 배경으로 바뀌는 버튼 호버 효과를 구현하기 위해 순수 CSS를 사용하는 방법에 관한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 그것은 당신에게 도움이 될 것입니다.

효과 미리보기

순수 CSS를 사용하여 공이 직사각형 배경으로 바뀌는 버튼 호버 효과를 얻는 방법(소스 코드 첨부)

소스 코드 다운로드

https://github.com/comehope/front-end-daily-challenges

코드 해석

dom을 정의하면 탐색에 순서가 없는 목록, 목록이 포함됩니다. 다음의 목록 항목입니다:

<nav>
    <ul>
        <li>home</li>
    </ul>
</nav>

로그인 후 복사

중앙에 표시:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

로그인 후 복사

목록 항목의 프런트 엔드에 있는 부팅 기호 숨기기:

nav ul {
    padding: 0;
    list-style-type: none;
}

로그인 후 복사

컨테이너 크기 설정:

nav li {
    width: 8em;
    height: 2em;
    font-size: 25px;
}

로그인 후 복사

텍스트 스타일 설정:

nav li {
    font-size: 25px;
    text-align: center;
    line-height: 2em;
    font-family: sans-serif;
    text-transform: capitalize;
}

로그인 후 복사

추가 의사 요소, 의사 요소는 2개의 작은 공입니다:

nav li {
    position: relative;
}

nav li::before,
nav li::after {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.6em;
    background-color: gainsboro;
    border-radius: 50%;
}

로그인 후 복사

공을 왼쪽과 오른쪽 끝에 배치합니다.

nav li::before {
    top: calc(50% - 0.6em / 2);
    left: 0;
}

nav li::after {
    bottom: calc(50% - 0.6em / 2);
    right: 0;
}

로그인 후 복사

다음으로 버튼 호버 효과를 설정합니다.

마우스를 버튼 위로 가져가면 공이 컨테이너 크기와 동일한 직사각형으로 변경됩니다.

nav li:hover::before,
nav li:hover::after {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

로그인 후 복사

첫 번째 직사각형을 오른쪽 하단 모서리로 약간 이동하고 색상을 심화시켜 그림자 효과를 만듭니다.

nav li:hover::before {
    z-index: -1;
    top: 0;
}

nav li:hover::after {
    z-index: -2;
    bottom: -0.4em;
    right: -0.4em;
    filter: brightness(0.8);
}

로그인 후 복사

설정 마우스 오버 색상, 의사 요소의 직사각형 배경이 파란색으로 바뀌고 텍스트가 흰색으로 변합니다.

nav li:hover {
    color: white;
}

nav li:hover::before,
nav li:hover::after {
    background-color: dodgerblue;
}

로그인 후 복사

의사 요소의 여유 시간 기능이 의인화된 애니메이션 효과를 사용하는 여유 시간을 설정합니다.

nav li {
    transition: 0.5s;
}

nav li::before,
nav li::after {
    transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
}

로그인 후 복사

버튼 몇 개 더 추가하세요 :

<nav>
    <ul>
        <li>home</li>
        <li>products</li>
        <li>services</li>
        <li>contact</li>
    </ul>
</nav>

로그인 후 복사

마지막으로 버튼 사이의 간격을 늘리세요 :

nav li {
    margin: 0.8em;
}

로그인 후 복사

끝났습니다!