-
Transition 효과개발/css 2024. 9. 12. 20:40
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, height 2s;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h3>Hover over the box!</h3>
<div></div>
</body>
</html>다음 코드는 div에 마우스를 올리면 너비와 높이가 2초간 서서히 200px로 커지는 코드다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 2s;
}
div:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<h3>Hover to rotate!</h3>
<div></div>
</body>
</html>이 코드는 div에 마우스를 올리면 2초간45도 정도의 각도를 돌리는 transform 효과가 작동된다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
transition: transform 2s;
}
div:hover {
transform: skewX(20deg);
}
</style>
</head>
<body>
<h3>Hover to skew!</h3>
<div></div>
</body>
</html>이 코드는 마찬가지로 div에 마우스를 올리면 2초 동안 20도 정도 x축 방향으로 비틀어지는 transform 효과를 준다.
'개발 > css' 카테고리의 다른 글
@keyframes를 활용한 애니메이션 주기 (0) 2024.09.12 text-shadow의 인자값을 알아보자 (0) 2024.09.12 글 마우스 드래그 안되게 하는 법 (user-select: none;) (0) 2024.08.12 width: auto; (0) 2024.08.12