HTML 및 CSS로 애니메이션 배경 만들기

 .wrapper div:nth-child(2) {
    top: 20%;
    left: 20%;
    animation: animate 8s linear infinite;
}

.wrapper div:nth-child(3) { 
    top: 60%;
    left: 80%;
    animation: animate 10s linear infinite;
}

.wrapper div:nth-child(4) { 
    top: 40%;
    left: 40%; 
    animation: animate 3s linear infinite;
}

.wrapper div:nth-child(5) {
    top: 66%;
    left: 30%;
    animation: animate 7s linear infinite;
}

.wrapper div:nth-child(6) {
    top: 90%;
    left: 10%;
    animation: animate 9s linear infinite;
} 

하위 요소에 더 많은 비율을 할당하여 다양한 진행 단계에서 정상에 오르게 할 수 있습니다.

 .wrapper div:nth-child(7) {
    top: 30%;
    left: 60%;
    animation: animate 5s linear infinite;
}

.wrapper div:nth-child(8) {
    top: 70%;
    left: 20%;
    animation: animate 8s linear infinite;
}

.wrapper div:nth-child(9) {
    top: 75%;
    left: 60%;
    animation: animate 10s linear infinite;
}

.wrapper div:nth-child(10) {
    top: 50%;
    left: 50%;
    animation: animate 6s linear infinite;
}

.wrapper div:nth-child(11) {
    top: 45%;
    left: 20%;
    animation: animate 10s linear infinite;
}
 

`@키프레임` CSS 속성을 활용하여 다양한 시간 간격으로 원형 요소를 점진적으로 변경하고 회전할 수 있습니다. 제공된 코드는 점을 70도 회전하고 원은 거품 모양을 생성하는 각도로 회전하는 것을 보여줍니다.

 @keyframes animate {
    0% {
        transform: scale(0) translateY(0) rotate(70deg);
    }
    100% {
        transform: scale(1.3) translateY(-100px) rotate(360deg);
    }
} 

CSS 패턴을 활용하면 파도, 격자, 나뭇잎 등 시각적으로 매력적인 다양한 디자인을 생성하여 배경에 고급스러운 미학을 불어넣을 수 있으며, 이를 통해 매혹적인 동적 효과를 쉽게 만들 수 있습니다.

CSS를 사용하여 많은 속성에 애니메이션을 적용할 수 있습니다.

CSS를 사용하면 배경 색조를 변경하고 애니메이션 주기의 지속 시간을 조정하는 등 다양한 애니메이션 효과를 생성할 수 있습니다.

애니메이션 시퀀스를 무한 반복하도록 설정하는 등 애니메이션 시퀀스가 실행될 빈도를 지정할 수 있습니다. 또한 애니메이션의 동작을 결정할 수 있으며, 기존 방식으로 진행하거나 진행 방향을 반전시킬 수도 있습니다. 애니메이션을 조작할 수 있는 기능은 창의적인 탐색을 위한 충분한 기회를 제공하며 애플리케이션에 활력을 불어넣을 수 있습니다.