CSS μ λλ©μ΄μ : κ΅΄λ¬κ°λ λ¨λ¬΄μ§
μ€λμ CSSμ λ€μν μμ±μ μ΄μ©νμ¬ μ λλ©μ΄μ μ λ§λ€μ΄ 보λλ‘ νκ² μ΅λλ€. μμ ν΄λ³Ό μ λλ©μ΄μ μ λ€μκ³Ό κ°μ΅λλ€.
See the Pen animation01 by mj0614k (@mj0614k) on CodePen.
1. HTML μμ€
<div class="box"></div>
λ¨λ¬΄μ§μ κ·Έλ¦Όμλ κ°μμμλ‘ μμ ν΄μ€ κ²μ΄κΈ° λλ¬Έμ, HTML μμ€λ box ν΄λμ€λ₯Ό κ°μ§ div λ°μ€ νλλ‘ μΆ©λΆν©λλ€.
2. CSS μμ€
body {
height: 100vh;
background-image: linear-gradient(to top, skyblue, pink);
}
.box {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.box::before {
content: '';
width: 50px;
height: 5px;
background: #000;
position: absolute;
top: 58px;
left: 0;
border-radius: 50%;
opacity: 0.2;
animation: shadow 0.6s linear infinite;
}
@keyframes shadow {
0% {
transform: scale(1, 1)
}
50% {
transform: scale(1.2, 1)
}
100% {
transform: scale(1,1)
}
}
.box::after {
content: '';
background: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 0;
border-radius: 3px;
animation: load 0.6s linear infinite;
}
@keyframes load {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translatey(9px) rotate(22.5deg);
}
50% {
transform: translatey(18px) scale(1, 0.9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translatey(9px) rotate(67.5deg);
}
100% {
transform: translatey(0px) rotate(90deg);
}
}
gradientμ 'κΈ°μΈμ΄μ§'μ μ λλ, κΈ°μ¨μ΄λ μλ ₯μ 'λ³ν λΉμ¨'μ λ»ν©λλ€. μ¦ cssμμ gradientλ ν λ°©ν₯μμ λ€λ₯Έ λ°©ν₯μΌλ‘ μμ΄ μ μ°¨ νλ €μ§κ±°λ, μμ΄ λ³ννλ ν¨κ³Όλ₯Ό μ€ λ μ¬μ©νλ μμ±μ λλ€. λ°±κ·ΈλΌμ΄λμ μ€ linear-gradient μμ±μ μλ¨μ ν₯ν΄(to top), skyblueμμ pinkλ‘ μμ΄ λ³ννλ€λ μλ―Έμ λλ€.
μμ HTML, CSS μμ€λ₯Ό ν©μΉλ©΄ μ λλ©μ΄μ μ΄ μμ±λ©λλ€. κ°λ¨νμ£ ?
'CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
CSS : SVG λν λ§λ€κΈ° (4) | 2022.09.07 |
---|---|
CSS μ λλ©μ΄μ λ§λ€κΈ° : 곡 νκΈ°κΈ° (1) | 2022.09.02 |
CSS μ λλ©μ΄μ λ§λ€κΈ° : λΉκΈλΉκΈ λμκ°λ μ (4) | 2022.08.29 |
CSS : μμ μ¨κΈ°κΈ° (10) | 2022.08.25 |
CSS : μμ νν λ°©λ² (6) | 2022.08.23 |
λκΈ