CSS ์ ๋๋ฉ์ด์ : ๊ณต ํ๊ธฐ๊ธฐ
์ค๋์ CSS์ ๋ค์ํ ์์ฑ์ ์ด์ฉํ์ฌ ์ ๋๋ฉ์ด์ ์ ๋ง๋ค์ด ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. ์์ ํด๋ณผ ์ ๋๋ฉ์ด์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. ์กฐ๋ญ์ด๋ก ๊ฐ๋ค์.
See the Pen balls by mj0614k (@mj0614k) on CodePen.
1. HTML ์์ค
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
<div class="wrapper">
<div></div>
</div>
์์์ ํฌํจํ์ฌ ๋ค์ฏ ๊ฐ์ ๊ณต์ ๋ง๋ค ๊ฒ์ด๊ธฐ ๋๋ฌธ์, ๋ค์ฏ ๊ฐ์ wrapper ํด๋์ค๋ฅผ ๊ฐ์ง div ๋ฐ์ค๋ฅผ ๋ง๋ค์ด ์ค๋๋ค.
2. CSS ์์ค
* {
box-sizing: border-box;
}
body {
background: linear-gradient(to top, pink 0%, skyblue 100%);
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
animation: x 1s ease-in-out alternate infinite 0s both;
}
.wrapper:nth-of-type(2) {
animation-delay: 0.1s;
}
.wrapper:nth-of-type(3) {
animation-delay: 0.2s;
}
.wrapper:nth-of-type(4) {
animation-delay: 0.3s;
}
.wrapper:nth-of-type(5) {
animation-delay: 0.4s;
}
.wrapper>div {
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 100%;
margin: 40px;
animation: y 1s linear infinite 0s both;
}
.wrapper:nth-of-type(2)>div {
animation-delay: 0.1s;
height: 40px;
width: 40px;
opacity: 0.8;
}
.wrapper:nth-of-type(3)>div {
animation-delay: 0.2s;
height: 30px;
width: 30px;
opacity: 0.6;
}
.wrapper:nth-of-type(4)>div {
animation-delay: 0.3s;
height: 20px;
width: 20px;
opacity: 0.4;
}
.wrapper:nth-of-type(5)>div {
animation-delay: 0.4s;
height: 10px;
width: 10px;
opacity: 0.2;
}
@keyframes x {
0% {
transform: translateX(-100px)
}
100% {
transform: translateX(100px)
}
}
@keyframes y {
25% {
transform: translateY(-50px)
}
0%, 50%, 100% {
transform: translateY(0)
}
75% {
transform: translateY(50px)
}
}
body์ ๊ทธ๋ผ๋ฐ์ด์ ์ผ๋ก ๋ฐฐ๊ฒฝ์์ ์ฃผ๊ณ , display: flex๋ก ๋ค์ฏ ๊ฐ์ ๊ณต์ ๋ฐฐ์นํด ์ค๋๋ค. position: absolute๋ฅผ ํ์ฉํ์ฌ ํ ๊ณณ์ ๊ณต์ ํฉ์ณ์ค ๋ค, ์ ๋๋ฉ์ด์ ๋๋ ์ด ์๊ฐ์ ์ ์ฐจ์ ์ผ๋ก ๋๋ ค์ฃผ๊ณ , ํฌ๊ธฐ๋ฅผ ์ ์ฐจ์ ์ผ๋ก ์ค์ฌ์ฃผ๋ฉฐ ์์์ ๋ง๋ค์ด ์ค๋๋ค.
์์ HTML, CSS ์์ค๋ฅผ ํฉ์น๋ฉด ์ ๋๋ฉ์ด์ ์ด ์์ฑ๋ฉ๋๋ค. ๊ฐ๋จํ์ฃ ?
'CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
CSS ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ : SVG (5) | 2022.09.08 |
---|---|
CSS : SVG ๋ํ ๋ง๋ค๊ธฐ (4) | 2022.09.07 |
CSS ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ : ๊ตด๋ฌ๊ฐ๋ ๋ค๋ชจ (8) | 2022.08.29 |
CSS ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ : ๋น๊ธ๋น๊ธ ๋์๊ฐ๋ ์ (4) | 2022.08.29 |
CSS : ์์ ์จ๊ธฐ๊ธฐ (10) | 2022.08.25 |
๋๊ธ