반응형
css keyframes을 이용한 마을꾸미기 해봤습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TOWN_ANIMATION</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section>
<article class="sky">
<img src="img/sun.png" alt="sun" class="sun">
<img src="img/cloud1.png" alt="cloud1" class="cloud1">
<img src="img/cloud2.png" alt="cloud2" class="cloud2">
<img src="img/airplane.png" alt="airplane" class="airplane">
</article>
<article class="town">
<img src="img/circle.png" alt="circle" class="circle">
<img src="img/town_night.png" alt="night" class="night">
<img src="img/town_day.png" alt="day" class="day">
</article>
<article class="people">
<img src="./img/man.png" alt="man" class="man">
<img src="./img/family.png" alt="family" class="family">
</article>
</section>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
/* reset.css */
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
animation: sky linear 20s infinite;
}
section {
width: 1000px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -500px;
}
section .sky {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
section .sky .sun {
position: absolute;
left: 50%;
margin-left: -100px;
top: -150px;
transform-origin: center 500px;
animation: sun linear 20s infinite;
}
section .sky .cloud1 {
position: absolute;
top: -30px;
left: 10%;
animation: flow linear 10s infinite;
}
section .sky .cloud2 {
position: absolute;
top: 20px;
left: 0%;
animation: flow linear 20s infinite;
}
section .sky .airplane {
position: absolute;
top: -100px;
right: 0%;
width: 120px;
animation: reflow linear 20s infinite;
}
section .town .circle {
position: absolute;
bottom: 104px;
left: 50%;
margin-left: -165px;
opacity: 0.7;
animation: rotation linear 20s infinite;
}
section .town .night {
position: absolute;
bottom: 0px;
left: 40px;
}
section .town .day {
position: absolute;
bottom: 0px;
left: 40px;
animation: day linear 20s infinite;
}
section .people {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
animation: day linear 20s infinite;
}
section .people .man {
position: absolute;
left: 0%;
bottom: 0px;
animation: flow linear 7s infinite;
}
section .people .family {
position: absolute;
left: 0%;
bottom: 0px;
animation: flow linear 20s infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes sun {
0% {
transform: rotate(-90deg);
opacity: 0;
}
25% {
transform: rotate(-30deg);
opacity: 1;
}
50% {
transform: rotate(30deg);
opacity: 1;
}
75% {
transform: rotate(90deg);
opacity: 0;
}
100% {
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes sky {
0% {
background: #b08fcc;
}
25% {
background: #b1e1e2;
}
50% {
background: #fcd2e2;
}
75% {
background: #636888;
}
100% {
background: #b08fcc;
}
}
@keyframes day {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes flow {
0% {left: 0%; opacity: 0;}
10% {opacity: 1;}
80% {opacity: 1;}
100% {left: 90%; opacity: 0;}
}
@Keyframes reflow {
0% {right: 0%; opacity: 0;}
10% {opacity: 1;}
80% {opacity: 1;}
100% {right: 90%; opacity: 0;}
}
'STYLE SHEET > Animation' 카테고리의 다른 글
| CSS Animation - @keyframes, steps (0) | 2022.06.13 |
|---|---|
| CSS Animation - linear, forwards (0) | 2022.06.13 |
| CSS Animation (0) | 2022.06.13 |