<!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 을 지정해두면 앞으로 변화할 요소의 크키, 모양을 부드럽게 늘어나고 줄어들도록 지정한다
'코딩 공부 > HTML' 카테고리의 다른 글
| [HTML] - iframe을 JS로 제어하고 css를 맘껏 써보자! (0) | 2023.01.04 |
|---|---|
| 보여주는 속성을 지정하기 visibility (0) | 2022.06.08 |
| html - 반응형 웹 제작을 효율적으로 하는 법 rem (0) | 2022.05.19 |
| css 로 네온사인 효과 주기 (0) | 2022.05.18 |
| 모달 스크롤할 때 바디 스크롤 방지 (0) | 2022.03.31 |