아이콘 호버 애니메이션
Coddy의 하단 네비게이션 바 - HTML/CSS 프로젝트 코스 레슨 — 12개 중 12번째.
각 아이콘에 트랜지션 효과를 추가해 보겠습니다. 이를 위해 :hover CSS 선택자를 사용할 것입니다:
챌린지
쉬움아이콘에 호버 효과를 만들려면 다음 CSS 코드를 추가할 수 있습니다 (색상은 원하는 대로 조정할 수 있습니다!):
.navigation ul li:hover {
color: purple;
transform: scale(1.2);
background-color: #fff;
border-radius: 50%;
}이제 모든 준비가 끝났습니다! 내비게이션 바가 완성되었습니다. 내비게이션 바의 아이콘 위에 마우스를 올려서 추가한 트랜지션 효과를 확인할 수 있습니다.
즐거운 코딩 하세요!!
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>