728x90
애니메이션01
오늘은 아래와 같은 바닥에 튕기면서 구르는 네모 박스 애니메이션을 만들어 보았습니다.
HTML
<div class="box"></div>
CSS
body {
height: 100vh;
background-image: linear-gradient(to top, #2C3E50, #FD746C); /* to top: 아래에서 위로 향하는 */
}
.box {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* shadow 효과 */
.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: tomato;
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);}
}
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS]애니메이션03 (2) | 2022.09.02 |
|---|---|
| [CSS]애니메이션02 (5) | 2022.08.29 |
| [CSS]요소 숨기기 (8) | 2022.08.25 |
| [CSS]색상 표현 방법 (4) | 2022.08.23 |
| [CSS]단위 (4) | 2022.08.23 |
댓글