ani transition
(애니메이션효과)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/07_ani_transition.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
css
.box {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: blue;
/* 외곽선 */
border: 1px solid black;
/* 바깥여백(축약식) - 중앙정렬 */
/* margin: 상하 auto */
margin: 20px auto;
/* TODO: 애니메이션 추가 */
/* transition-property: 애니메이션효과를 부여할 속성 나열 */
/* 사용법 : trasition-property: 속성, 속성2 ... */
transition-property: width, height;
/* 지속시간 : 애니메이션 효과를 지속할 시간
s(second) : 초, ms(mili second) : 1/1000 초
*/
/* 사용법 : trasition-duration: 지속시간(속성), 지속시간(속성2) ... */
transition-duration: 2s, 1s;
}
/* 박스에 마우스가 위로 올라가면 : hover */
.box:hover {
/* 가로 : 100px -> 200px */
width: 200px;
/* 세로 : 100px -> 120px */
height: 120px;
}
결과
마우스 커서를 올리면
ani transition2
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/08_ani_transition2.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
css
.box {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 가로 중앙 정렬 */
margin: 50px auto;
/* 배경색 */
background-color: orange;
/* 외곽선 */
border: 1px solid black;
/* TODO : 애니메이션 부여(축약식) */
/* all : 모든 속성 */
/* ease-in : 시작(천천히 진행) - 끝(빨리진행) : 속도차이가 있는 효과 부여 */
/* 2s :2초(지속시간) */
/* 사용법: transition: 속성 속도차이효과 지속시간; */
transition: all ease-in 2s;
}
/* 마우스가 위로 올라가면 :hover */
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
결과
마우스 커서를 올리면
ani transition3
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/09_ani_transition3.css">
</head>
<body>
<div class="bg-tr"></div>
<div class="border-tr"></div>
</body>
</html>
css
div {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 바깥여백 */
margin: 30px;
/* 좌측 배치 : 가로 배치(display: inline-block) */
float: left;
}
/* 1st 박스 */
.bg-tr {
/* 배경색 */
background-color: skyblue;
/* TODO: 애니메이션 부여 */
/* ease : 시작(천천히효과부여) 중간(빨리효과부여) 끝(천천히효과부여) */
/* 사용법 : transition: 속성 효과 지속시간(s,ms); */
transition: all ease 1s;
}
/* 1st 박스에 마우스 위로 */
.bg-tr:hover {
/* 배경색 */
background-color: blue;
}
/* 2nd 박스 */
.border-tr {
/* 배경색 */
background-color: orange;
/* TODO: 애니메이션 부여 */
/* linear : 등속, 시작 - 중간 - 끝 모두 속도가 같음 */
/* 사용법 : transition: 속성 효과 지속시간(s,ms); */
transition: all linear 1s;
}
/* 2nd 박스에 마우스 위로 */
.border-tr:hover {
/* 배경색 */
background-color: red;
border-radius: 50%;
}
결과
마우스 커서를 올리면
ani rotate
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/10_ani_rotate.css">
</head>
<body>
<div id="container">
<img src="./img/bear.jpg" alt="곰">
</div>
</body>
</html>
css
/* 전체 div */
#container {
/* 가로 */
width: 200px;
/* 중앙 정렬 */
margin: 30px auto;
}
/* 애니메이션 효과 부여 대상 */
img {
/* 외곽선 */
border: 1px solid #cccccc;
/* 둥근 사각형 : 50%(원) */
border-radius: 50%;
/* TODO: 애니메이션 효과 부야(함수 사용) */
/* TODO: animation: 함수명 지속시간 infinite(무한) */
animation: rotateBear 2.5s infinite;
}
/* css 함수 */
/* @keyframes 함수명 */
/* from {} : 최초 실행 위치 */
/* 50% {} : 중간 실행 위치 */
/* to {} : 마지막 실행 위치 */
@keyframes rotateBear {
/* TODO: 음수 : 왼쪽으로 회전, 양수 : 오른쪽으로 회전 */
/* TODO: rotateY(도(0~360)) : y축을 기준으로 회전 */
/* TODO: rotateY(도(0~360)) : x축을 기준으로 회전 */
/* TODO: perspective(픽셀) : 원근감 */
/* TODO: 사용법: transform: perspective(위치) rotateY(0~360도) */
from {
transform: perspective(200px) rotateY(0deg);
}
50% {
transform: perspective(200px) rotateY(-180deg);
}
to {
transform: perspective(200px) rotateY(-360deg);
}
}
결과
y축을 기준으로 돌아간다
ani translate
html
<!-- 10_ani_translate.html -->
<!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>
<link rel="stylesheet" href="./css/11_ani_translate.css">
</head>
<body>
<div id="container">
<div class="origin">
<!-- x축으로 이동 -->
<div id="movex"></div>
</div>
<div class="origin">
<!-- y축으로 이동 -->
<div id="movey"></div>
</div>
<div class="origin">
<!-- x,y축으로 이동 -->
<div id="movexy"></div>
</div>
</div>
</body>
</html>
css
/* 전체 div: 부모 div */
#container {
/* 가로 */
width: 800px;
/* 세로 */
height: 200px;
/* 중앙 정렬 */
margin: 20px auto;
}
/* 1st, 2nd, 3rd 박스들 : 자식 div */
.origin {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 외곽선 */
border: 1px solid black;
/* 왼쪽 배치 : 가로 배치 == display:inline-block; */
float: left;
/* 바깥 여백 */
margin: 40px;
}
/* 손자 div 들 : 자식 div 안에 div를 말함 */
.origin > div {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: orange;
}
/* TODO: 이동 애니메이션 부여 */
/* 1st 손자 div : #movex 에 마우스가 올라 갔을 때 */
#movex:hover{
/* 이동 효과 부여 */
/* 사용법 : transform: translateX(x좌표거리) */
transform: translateX(50px);
}
/* 2nd 손자 div : #movex 에 마우스가 올라 갔을 때 */
#movey:hover{
/* 이동 효과 부여 */
/* 사용법 : transform: translateY(y좌표거리) */
transform: translateY(50px);
}
/* 3nd 손자 div : #movex 에 마우스가 올라 갔을 때 */
#movexy:hover{
/* 이동 효과 부여 */
/* 사용법 : transform: translate(x좌표거리, y좌표거리) */
transform: translate(50px,50px);
}
결과
마우스 커서를 올리면
'HTML > Css' 카테고리의 다른 글
| [CSS] 홈페이지 만들기 (0) | 2023.08.14 |
|---|---|
| [CSS] position (0) | 2023.08.11 |
| [CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span (0) | 2023.08.09 |
| [CSS] box collapse schedule (0) | 2023.08.08 |
| [CSS] box, border, padding, margin, width (0) | 2023.08.07 |