-
Requirements:
- Use external CSS
- Use animations, transformations
Clues:
- Use 'animation-delay'
- Use 'transform'
- Use 'border-radius'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="animation-dot">
<div class="animation-dot__dot"></div>
<div class="animation-dot__dot"></div>
<div class="animation-dot__dot"></div>
</div>
<div class="animation-chart">
<div class="animation-chart__bar"></div>
<div class="animation-chart__bar"></div>
<div class="animation-chart__bar"></div>
<div class="animation-chart__bar"></div>
<div class="animation-chart__bar"></div>
</div>
</body>
</html>
body, html{
width: 100%;
height: 100%;
background-color : #6BBCBE;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* 도트애니메이션 */
.animation-dot {
width: 200px;
height: 200px;
display: flex;
justify-content: space-around;
align-items: center;
animation: superLotateDot 1.55s infinite;
}
.animation-dot__dot {
width: 20px;
height: 20px;
border-radius: 50%;
background-color : #fff;
}
@keyframes superLotateDot {
0% {
transform: rotate(-0.5turn);
}
70% {
transform: rotate(0turn);
}
100% {
transform: rotate(0turn);
}
}
/* 차트 애니메이션 */
.animation-chart {
width: 150px;
height: 200px;
display: flex;
justify-content: space-around;
align-items: center;
}
.animation-chart__bar {
width: 20px;
height: 60px;
background-color: #fff;
animation: superScaleUpChart 1s infinite;
}
.animation-chart__bar:nth-child(1) {
animation-delay: 0ms;
}
.animation-chart__bar:nth-child(2) {
animation-delay: 100ms;
}
.animation-chart__bar:nth-child(3) {
animation-delay: 200ms;
}
.animation-chart__bar:nth-child(4) {
animation-delay: 300ms;
}
.animation-chart__bar:nth-child(5) {
animation-delay: 400ms;
}
@keyframes superScaleUpChart {
0% {
transform: scaleY(1);
}
20% {
transform: scaleY(2);
}
40% {
transform: scaleY(1);
}
100% {
transform: scaleY(1);
}
}'웹 개발 > HTML,CSS' 카테고리의 다른 글
| 노마드코더 : 코코아톡 챌린지7일 Pseudo Selector(의사 선택자) 사용하기 (0) | 2021.09.13 |
|---|---|
| 노마드코더 : 코코아톡 챌린지6일 flex box 이용하기 (0) | 2021.09.11 |
| 노마드코더 : 코코아톡 챌린지4일 form과 input 태그 (0) | 2021.09.09 |
노마드코더 : 코코아톡 챌린지8일 transform, @keyframes 사용