<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animtation</title>
<style>
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.screen {
width: 50%;
height: 95%;
background-color: #6BBCBE;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@keyframes dotspin {
from {
/* transform:rotate(0deg); */
}
to {
transform: rotate(180deg);
}
}
.screen__dot,
.screen__piano {
width: 25%;
height: 25%;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
}
.screen__dot {
animation: dotspin 2s ease-in-out infinite;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
}
@keyframes playkeyboard {
25% {
height: 50%;
}
50% {
height: 100%;
}
75% {
height: 50%;
}
}
.keyboard {
width: 10px;
height: 50%;
background-color: white;
}
.keyboard:first-child {
animation: playkeyboard 2s linear infinite;
}
.keyboard:nth-child(2) {
animation: playkeyboard 2s linear infinite;
animation-delay: 0.2s;
}
.keyboard:nth-child(3) {
animation: playkeyboard 2s linear infinite;
animation-delay: 0.4s;
}
.keyboard:nth-child(4) {
animation: playkeyboard 2s linear infinite;
animation-delay: 0.6s;
}
.keyboard:last-child {
animation: playkeyboard 2s linear infinite;
animation-delay: 0.8s;
}
</style>
</head>
<body>
<div class="screen">
<div class="screen__dot">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="screen__piano">
<div class="keyboard"></div>
<div class="keyboard"></div>
<div class="keyboard"></div>
<div class="keyboard"></div>
<div class="keyboard"></div>
</div>
</div>
</body>
</html>- 부모 div에 높이만 주고
- 내리갈굼으로 자식에게 % 매겨주기
Quadrilingual Programmer