CSS Background animate 버블(물방울)효과

 

 

 

 

HTML과 CSS를 사용하여 버블 애니메이션을 만드는 예시입니다. 코드를 하나씩 살펴보며 어떤 역할을 하는지와 함께 응용 가능한 방법도 설명해보겠습니다.

 

<div class="wrapper">
  <h1>Bubbles Animation</h1>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
</div>

<div> 태그를 사용하여 버블 애니메이션을 감싸고, 제목과 각 버블을 추가했습니다.

버블은 15개이며, 모두 같은 클래스 bubble을 가집니다.

 

모든 요소에 대한 스타일 초기화

* {
  margin: 0;
  padding: 0;
}

모든 요소의 마진과 패딩을 0으로 초기화합니다.

이렇게 함으로써 브라우저의 기본 스타일링을 무시하고, 스타일을 지정한 대로 요소를 보이게 할 수 있습니다.

 

.wrapper 클래스 스타일 지정

.wrapper {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #04fafd, 5%, #119dff, 50%, #030423);
  position: absolute;
}

.wrapper 클래스에 대해서는 다음과 같은 스타일을 지정합니다.

• height와 width 속성을 100%로 지정하여 화면 전체를 차지하도록 합니다.
• background 속성을 사용하여 그라데이션 배경을 지정합니다.
• position 속성을 사용하여 위치를 지정합니다.

h1 요소에 대한 스타일 지정

.wrapper h1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-family: sans-serif;
  letter-spacing: 1px;
  word-spacing: 2px;
  color: #fff;
  font-size: 40px;
  font-weight: 888;
  text-transform: uppercase;
}

h1 요소에 대해서는 다음과 같은 스타일을 지정합니다.

• top, left, position, transform 속성을 사용하여 제목의 위치와 정렬을 지정합니다.
• 폰트와 색상, 대소문자 변환, 글자 간격 등의 속성을 지정합니다.

.bubble 클래스 스타일 지정

.wrapper .bubble {
  height: 60px;
  width: 60px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  position: absolute;
  animation: animate 10s linear infinite;
}

 

.bubble 클래스에 대해서는 다음과 같은 스타일을 지정합니다.

• height와 width 속성을 60px로 지정하여 버블의 크기를 지정합니다.
• border 속성을 사용하여 테두리를 지정합니다.
• border-radius 속성을 사용하여 버블의 둥글기를 지정합니다.
• position 속성을 사용하여 위치를 지정합니다.
• animation 속성을 사용하여 버블의 움직임을 지정합니다.

각 .bubble 요소에 대한 스타일 지정

.wrapper .bubble:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-duration: 8s;
}
.wrapper .bubble:nth-child(2) {
  top: 60%;
  left: 80%;
  animation-duration: 10s;
}
.wrapper .bubble:nth-child(3) {
  top: 40%;
  left: 40%;
  animation-duration: 3s;
}
.wrapper .bubble:nth-child(4) {
  top: 66%;
  left: 30%;
  animation-duration: 7s;
}
.wrapper .bubble:nth-child(5) {
  top: 90%;
  left: 10%;
  animation-duration: 9s;
}
.wrapper .bubble:nth-child(6) {
  top: 30%;
  left: 60%;
  animation-duration: 5s;
}
.wrapper .bubble:nth-child(7) {
  top: 70%;
  left: 20%;
  animation-duration: 8s;
}
.wrapper .bubble:nth-child(8) {
  top: 75%;
  left: 60%;
  animation-duration: 10s;
}
.wrapper .bubble:nth-child(9) {
  top: 50%;
  left: 50%;
  animation-duration: 6s;
}
.wrapper .bubble:nth-child(10) {
  top: 45%;
  left: 20%;
  animation-duration: 10s;
}
.wrapper .bubble:nth-child(11) {
  top: 10%;
  left: 90%;
  animation-duration: 9s;
}
.wrapper .bubble:nth-child(12) {
  top: 20%;
  left: 70%;
  animation-duration: 7s;
}
.wrapper .bubble:nth-child(13) {
  top: 20%;
  left: 20%;
  animation-duration: 8s;
}
.wrapper .bubble:nth-child(14) {
  top: 60%;
  left: 5%;
  animation-duration: 6s;
}
.wrapper .bubble:nth-child(15) {
  top: 90%;
  left: 80%;
  animation-duration: 9s;
}

각 .bubble 요소에 대해서는 nth-child 선택자를 사용하여 개별적으로 위치와 애니메이션 지속 시간을 지정합니다. 이렇게 하면 각 버블의 움직임이 서로 다르게 만들어집니다.

애니메이션 효과

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

 

@keyframes 규칙을 사용하여 버블의 애니메이션 효과를 만듭니다.

• 0%에서 100%까지의 애니메이션을 정의합니다.
• transform 속성을 사용하여 버블의 크기, 위치, 회전을 변경합니다.

0%와 100%의 값이 다른데, 이는 애니메이션 시작 시간과 끝 시간에서 버블의 모양이 서로 다르게 만들어집니다. 이렇게 함으로써 애니메이션을 보다 자연스럽게 만들 수 있습니다.

이 CSS 코드는 HTML과 함께 사용되어 동적인 애니메이션 효과를 제공하는 예시입니다. 이와 같은 애니메이션 효과를 사용하면 웹 페이지에 생동감을 더할 수 있습니다.