통통튀는 네모 애니메이션

통통튀는 네모박스

통통튀는 애니메이션 효과가 들어간 박스를 만들어 보아요✏️

---

HTML

<div class="box"></div>

박스 한개를 만듭니다

CSS

body {
    height: 100vh;
    background-image: linear-gradient(to top, #B2A4FF,   #FFB4B4);
    }
.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: #21E1E1;
    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);}
}

linear-gradient: (to 방향, #시작색상, #끝 색상);

css에서 gradient속성은 색상이 아닌 크기가 없는 이미지 입니다. 따라서 gradient를 사용하려면 background-image 속성을 사용해야 합니다. linear-gradient는 선을 따라 그라데이션 색상을 넣는 방식 입니다.
시작 색상과 끝 색상은 필수 적으로 선택해야 하며 중간에 색상을 더 추가 할 수 있습니다.

결과

---

코드팬 보기