CSS | ANIMATION | 울렁울렁 웨이브 만들기

울렁울렁 웨이브 애니메이션 만들기 ➰

원 형태의 여러 점에 스핀 효과와 스케일 효과를 적용하여 웨이브처럼 보이게 만들어 보았습니다.
이번엔 Pug와 SCSS를 활용해서 만들었으니 참고해주세요 !

---

#1. HTML(Pug) 코드를 확인해보자

div.circle-wrap
    - for (var x =1; x <= 12; x++)
        div.row
            - for (var y = 1; y <= 12; y++)
                div.circle 

#2. CSS(SCSS) 코드를 확인해보자

@mixin center {
    display: flex;
    align-items: center;
    justify-content: center;
}
body {
    @include center;
    height: 100vh;
    background-image: linear-gradient(45deg, #00dbde 0%, #fc00ff 100%);
}
.row {
    display: flex;

    .circle {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: 5px 10px;
        background: #fff;
        transform-origin: top center;
        animation: spin 1s linear infinite;
    }
}
@keyframes spin {
    0% {transform: scale(1.1) rotate(0deg)}
    50% {transform: scale(0.1) rotate(180deg)}
    100% {transform: scale(1.1) rotate(360deg)}
}
@for $i from 1 through 12 {
    .row:nth-child(#{$i}) .circle {
    animation-delay: 100ms * $i
    }
}

SCSS를 활용하면 for문 작성도 가능합니다.