코딩 공부/HTML
html 간단한 모션을 만들어보기 -transition
hg_96
2022. 6. 8. 14:09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
/* visibility:hidden; */
}
</style>
</head>
<body>
<h1>transition 예제</h1>
<p>빨간 네모박스에 마우스를 올려보세요</p>
<div></div>
</body>
</html>
핵심은 transition 을 지정해두면 앞으로 변화할 요소의 크키, 모양을 부드럽게 늘어나고 줄어들도록 지정한다