이 기사의 내용은 버튼 전환 시 배경의 호버 애니메이션 효과를 얻기 위해 순수 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: teal; }
목록 항목의 앞쪽 끝에 있는 가이드 기호 숨기기:
nav ul { padding: 0; list-style-type: none; }
버튼 컨테이너 크기 정의:
:root { font-size: 10px; } nav li { width: 20rem; height: 7rem; }
텍스트 스타일 설정:
nav li { font-size: 20px; text-align: center; line-height: 7rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px; }
의사 요소가 포함된 배경 색상 블록 2개 만들기:
nav li { position: relative; } nav li::before, nav li::after { content: ''; position: absolute; width: inherit; height: inherit; top: 0; left: 0; } nav li::before { background-color: white; z-index: -1; } nav li::after { background-color: goldenrod; z-index: -2; }
뒤의 배경 블록을 오른쪽 아래로 이동하고 앞의 배경 블록에 그림자를 드리워 입체 효과를 높입니다.
nav li::before { box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2); } nav li::after { transform: translate(1.5rem, 1.5rem); }
다음으로 호버 효과를 추가합니다.
이징 시간을 설정하면 기본 요소와 의사 요소 모두 이징 효과가 있습니다.
nav li { transition: 0.3s; } nav li::before, nav li::after { transition: 0.3s; }
마우스를 가리키면 두 배경색 블록의 색상이 바뀝니다.
nav li:hover::before { background-color: goldenrod; } nav li:hover::after { background-color: white; }
동시에 배경색 블록이 변경됩니다. 그 뒤에는 왼쪽 위로 이동합니다. 정사각형으로 이동하면 버튼 전체가 오른쪽 아래로 이동합니다.
nav li:hover { transform: translate(1.5rem, 1.5rem); } nav li:hover::after { transform: translate(-1.5rem, -1.5rem); }
동시에 마우스를 올리면 텍스트 색상이 변경됩니다.
nav li:hover { color: white; }
버튼 몇 개 더 추가:
<nav> <ul> <li>home</li> <li>products</li> <li>services</li> <li>contact</li> </ul> </nav>
마지막으로 버튼 사이의 간격을 늘립니다.
nav li { margin: 3rem; }
끝났습니다!
관련 추천:
CSS를 사용하여 오리 머리를 구현하는 방법(코드 포함)
순수한 CSS를 사용하여 검은색 Angry Bird를 구현하는 방법(코드 포함)
위 내용은 버튼을 전환할 때 배경의 호버 애니메이션 효과를 얻기 위해 순수 CSS를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!