1. animation
- CSS에서 요소에 움직임을 부여할 수 있는 속성, 시간에 따라 스타일이 자연스럽게 변하도록 만듦.
- CSS 만으로도 부드럽고 다채로운 인터랙션(interaction)을 만들 수 있기때문에 웹 디자인에 자주 사용됨
@keyframes
- CSS에서 애니메이션의 "동작 단계"를 정의하는 문법.
- 어떤 요소가 어떻게 변화할지, 언제 어떤 상태가 될지를 순서대로 알려줌.
2. CSS 그라디언트
- gradient는 두가지 이상의 색상이 자연스럽게 섞여서 부드럽게 변하는 배경효과
1.1 linear-gradient(선형 그라디언트)
- 직선
- 기본방향 top to bottom(180deg)
- to right : 왼쪽에서 오른쪽으로 색상 전개
1.2 radial-dradient(원형 그라디언트)
- 색상이 원 또는 타원 형태로 중심에서 바깥쪽으로 퍼지는 그라디언트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation</title>
<style>
body {
background: linear-gradient(to top, #a0e9ff, #fff);
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
margin: 0;
}
.ball {
width: 80px;
height: 80px;
background-color: #ff6b6b;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
animation: bounce 1s in infinite ease-in-out;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-200px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
3. animation 활용
3.1 nth-child(n) : 부모 요소의 자식 중 몇번쨰 요소인지를 기준으로 선택할 수 있게 해주는 선택자이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation 활용</title>
<style>
body {
background-color: #222;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
gap: 20px;
}
.reward {
width: 100px;
height: 100px;
background: radial-gradient(circle at center, gold, orange);
border-radius: 50%;
box-shadow: 0 0 15px gold;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
font-weight: bold;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
/* opacity: 0; */
transform: scale(0.3);
animation: popUp 1.2s ease-out forwards, golw 2s infinite alternate;
}
/* nth-child : 애니메이션 딜레이 효과
animation-delay : 첫번째 애니메이션, 두번째 애니메이션*/
.reward:nth-child(1) {
animation-delay: 0s, 0s;
}
.reward:nth-child(2) {
animation-delay: 0.3s, 0s;
}
.reward:nth-child(3) {
animation-delay: 0.6s, 0s;
}
@keyframes popUp {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.15);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes golw {
0% {
box-shadow: 0 0 10px rgba(225, 215, 0, 0.5);
}
100% {
box-shadow: 0 0 30px rgba(255, 215, 0, 1);
}
}
</style>
</head>
<body>
<div class="container">
<div class="reward">+100🍕</div>
<div class="reward">+50🍔</div>
<div class="reward">+1🍟</div>
</div>
</body>
</html>
'Frontend' 카테고리의 다른 글
| 졸업논문_노현지 (0) | 2025.04.08 |
|---|---|
| day05_transform (0) | 2025.04.08 |
| day05_미디어 쿼리 (1) | 2025.04.08 |
| day04_position_(4)absolute (0) | 2025.04.04 |
| day04_positon_(2) fixed (0) | 2025.04.04 |