Створіть анімований фон за допомогою HTML і CSS

Застосування анімованого фону на вашому вебсайті або в додатку здатне надати йому неповторного та захоплюючого вигляду. Оригінальні фони можуть викликати певні емоції та покращувати враження користувача від взаємодії з інтерфейсом.

Існує безліч способів створення анімованих фонів для програм, однак найпростішим та ефективним є використання стандартних HTML та CSS. Розгляньте наступний приклад, проаналізуйте його код та ознайомтеся з демонстрацією готового анімованого фону.

Формування HTML структури

Метою є створення фону синього відтінку з бульбашками, які збільшуються в розмірі та рухаються вгору. Фінальний результат можна побачити на Codepen.

Почніть зі створення блоку `

Потім додайте 10 елементів `

 <section class="wrapper">
    <h2>Анімований Фон</h2>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
</section>

Оформлення за допомогою CSS

Використовуючи лише HTML, можливо створити вражаючі фонові ефекти. Однак у цьому проєкті CSS буде застосовуватися для стилізації та анімації фону.

Спочатку потрібно встановити значення полів та відступів в 0, щоб запобігти виникненню прогалин навколо фону.

 * {
  margin: 0;
  padding: 0;
}

Далі стилізуйте головний блок з класом “wrapper”. Цей блок займатиме 100% ширини та висоти, покриваючи всю сторінку. Встановіть фоновий колір у синій відтінок та надайте йому абсолютну позицію.

 .wrapper {
  height: 100%;
  width: 100%;
  background-color: #0066cc;
  position: absolute;
}

Стиль заголовка `

` також використовує абсолютне позиціонування. Щоб розмістити його в центрі сторінки, спочатку встановіть верхнє та ліве положення на 50%. Потім використайте трансформацію, щоб перемістити його вгору та вліво, щоб його центр був точно посередині.

.wrapper h2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-family: sans-serif;
  word-spacing: 2px;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
}

Тепер стилізуйте `div`, які будуть круглими для створення ефекту анімованих бульбашок. Кожному `div` встановіть висоту, ширину та облямівку. Великий радіус облямівки гарантує, що облямівка буде у формі кола. Додатково, задайте тривалість анімації за допомогою властивості `animation`.

.wrapper div {
    height: 60px;
    width: 60px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 100px;
    position: absolute;
    top: 10%;
    left: 10%;
    animation: 4s linear infinite;
}

Стилізуйте точки, задавши їм висоту та ширину 5 пікселів. Додайте точкам радіус облямівки та білий фон. Розмістіть кожну з них абсолютно ближче до верхнього правого кута батьківського `div`.

div .dot {
    height: 5px;
    width: 5px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 20%;
    right: 20%;
}

Потім застосуйте селектор `nth-child`, щоб розташувати кожен `div` з різними налаштуваннями. Ви можете назвати анімацію `animate`; її визначення буде надано нижче за допомогою `@keyframes`.

Використовуйте `nth-child(2)` для звернення до першого `div`, оскільки першим дочірнім елементом “.wrapper” є `h2`.

.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;
}

Ви можете надати нижнім елементам `div` вищі відсоткові значення, щоб вони рухалися до верхньої частини з різними інтервалами.

.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;
}

Використайте `@keyframes`, щоб поступово змінювати розмір та обертати кола та точки з різними інтервалами. В коді нижче точки повертаються на 70 градусів, а кола на 360. Таке обертання створює ефект бульбашок.

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

Ви можете урізноманітнити фони за допомогою CSS-шаблонів. Візерунки дозволяють створювати хвилі, сітки, рослинні мотиви та інші малюнки, які допоможуть вам створювати виняткові анімації.

Застосування CSS для анімації різноманітних властивостей

За допомогою CSS можна створити багато видів анімації. Серед них зміна кольору фону та затримка запуску анімації.

Ви також можете встановити частоту запуску анімації, зокрема, зробити її нескінченною. Також можливо задати напрямок руху анімації: вперед або назад. Експерименти з анімацією – це цікавий процес, і їх можна застосовувати для пожвавлення ваших додатків.