마우스가 호버될 당시에, block의 길이가 길어지고, 색상을 변화시키는 애니메이션을 주는 방법이다.
transition와 hover를 사용해 마우스를 올릴 때
width값이 변하는 시간이 달라지고, color로 컬러를 변경시키는 시간을 설정을 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 -1</title>
<style type="text/css">
* {
margin: 5px;
}
.menu li {
list-style-type: none;
}
.menu li a {
display : block;
width: 150px;
height: 20px;
background: Lightblue;
color: red;
text-decoration: none;
transition: width 1s, color 1s;
} /*변화가 생길 당시값을 조절할 수 있음*/
.menu li a:hover {
color: black;
width: 300px;
}
</style>
</head>
<body>
<h1>쇼핑몰 메뉴</h1>
<ul class= "menu">
<li><a href="#">신상품</a></li>
<li><a href="#">인기상품 50</a></li>
<li><a href="#">타임세일!!!</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</body>
</html>
수행결과
'개발자노트 > 웹' 카테고리의 다른 글
| Html - 외부 폰트 사용하기 (0) | 2022.07.22 |
|---|---|
| Html - 애니메이션 효과2 (애니메이션 프레임 , transform) (0) | 2022.07.22 |
| 웹 크롤링 - Jsoup을 이용한 ( CGV ) 크롤링 (0) | 2022.07.22 |
| Html - 긴 문장 스크롤 처리 하기 ( overflow-x, y ) (회원가입 약관동의) (0) | 2022.07.22 |
| Html 실습예제 메뉴 만들기 ( display, list-style-type, text-decoration ) (0) | 2022.07.22 |
