[해피CGI][cgimall] Bubbles Background Animation

css 로 제작된 배경 애니메이션 입니다.
역동적인 페이지 배경을 제작할때 유용해 보입니다.
자세한 내용은 데모를 확인해 주시기 바랍니다.

HTML

<div class="text-container">   Bubbles </div> <div class="gradient-bg">       <defs>       <filter id="goo">         <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />         <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />         <feBlend in="SourceGraphic" in2="goo" />       </filter>     </defs>   </svg>   <div class="gradients-container">     <div class="g1"></div>     <div class="g2"></div>     <div class="g3"></div>     <div class="g4"></div>     <div class="g5"></div>     <div class="interactive"></div>   </div> </div>

CSS

html, body {   font-family: 'Dongle', sans-serif;   margin: 0;   padding: 0; }   .text-container {   z-index: 100;   width: 100vw;   height: 100vh;   display: flex;   position: absolute;   top: 0;   left: 0;   justify-content: center;   align-items: center;   font-size: 96px;   color: white;   opacity: 0.8;   user-select: none;   text-shadow: 1px 1px rgba(0,0,0,0.1); }   :root {   --color-bg1: rgb(108, 0, 162);   --color-bg2: rgb(0, 17, 82);   --color1: 18, 113, 255;   --color2: 221, 74, 255;   --color3: 100, 220, 255;   --color4: 200, 50, 50;   --color5: 180, 180, 50;   --color-interactive: 140, 100, 255;   --circle-size: 80%;   --blending: hard-light; }   @keyframes moveInCircle {   0% {     transform: rotate(0deg);   }   50% {     transform: rotate(180deg);   }   100% {     transform: rotate(360deg);   } }   @keyframes moveVertical {   0% {     transform: translateY(-50%);   }   50% {     transform: translateY(50%);   }   100% {     transform: translateY(-50%);   } }   @keyframes moveHorizontal {   0% {     transform: translateX(-50%) translateY(-10%);   }   50% {     transform: translateX(50%) translateY(10%);   }   100% {     transform: translateX(-50%) translateY(-10%);   } }     .gradient-bg {   width: 100vw;   height: 100vh;   position: relative;   overflow: hidden;   background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));   top: 0;   left: 0;     svg {     position: fixed;     top:0;     left:0;     width: 0;     height: 0;   }       .gradients-container {     filter: url(#goo) blur(40px) ;     width: 100%;     height: 100%;   }     .g1 {     position: absolute;     background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;     mix-blend-mode: var(--blending);       width: var(--circle-size);     height: var(--circle-size);     top: calc(50% - var(--circle-size) / 2);     left: calc(50% - var(--circle-size) / 2);       transform-origin: center center;     animation: moveVertical 30s ease infinite;       opacity: 1;   }     .g2 {     position: absolute;     background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;     mix-blend-mode: var(--blending);       width: var(--circle-size);     height: var(--circle-size);     top: calc(50% - var(--circle-size) / 2);     left: calc(50% - var(--circle-size) / 2);       transform-origin: calc(50% - 400px);     animation: moveInCircle 20s reverse infinite;       opacity: 1;   }     .g3 {     position: absolute;     background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;     mix-blend-mode: var(--blending);       width: var(--circle-size);     height: var(--circle-size);     top: calc(50% - var(--circle-size) / 2 + 200px);     left: calc(50% - var(--circle-size) / 2 - 500px);       transform-origin: calc(50% + 400px);     animation: moveInCircle 40s linear infinite;       opacity: 1;   }     .g4 {     position: absolute;     background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;     mix-blend-mode: var(--blending);       width: var(--circle-size);     height: var(--circle-size);     top: calc(50% - var(--circle-size) / 2);     left: calc(50% - var(--circle-size) / 2);       transform-origin: calc(50% - 200px);     animation: moveHorizontal 40s ease infinite;       opacity: 0.7;   }     .g5 {     position: absolute;     background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;     mix-blend-mode: var(--blending);       width: calc(var(--circle-size) * 2);     height: calc(var(--circle-size) * 2);     top: calc(50% - var(--circle-size));     left: calc(50% - var(--circle-size));       transform-origin: calc(50% - 800px) calc(50% + 200px);     animation: moveInCircle 20s ease infinite;       opacity: 1;   }     .interactive {     position: absolute;     background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;     mix-blend-mode: var(--blending);       width: 100%;     height: 100%;     top: -50%;     left: -50%;       opacity: 0.7;   } }