<!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>transition 예제</title>
<style>
/* 박스에 마우스를 가져다대면 크기가 200px * 200px이 되도록 작성해보기*/
.box{width: 100px; height: 100px; background-color: aqua; transition: width 3s, height 2s;}
.box:hover{width: 200px; height: 200px; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_overflow, text-overflow(말줄임 표시) (0) | 2021.06.13 |
|---|---|
| CSS_transform (0) | 2021.06.12 |
| CSS_z-index (0) | 2021.06.12 |
| CSS_홈페이지 메인페이지 등분하기 (0) | 2021.06.12 |
| CSS_가로로 사각형 등분하기 (0) | 2021.06.11 |