Додавання анімованого фону до вашого веб-сайту чи програми може сприяти створенню унікального, цікавого дизайну. Креативні фони можуть викликати емоції та покращити взаємодію з користувачем.
Існує багато способів створити анімований фон для програми, але просте поєднання звичайного HTML і CSS працює особливо добре. Перегляньте цей приклад, дізнайтеся, як працює його код, і подивіться живу демонстрацію остаточного анімованого фону.
Створіть структуру HTML
Ви збираєтеся створити фон синього кольору з бульбашками, які ростуть і пливуть угору. Ви можете побачити кінцевий результат на цьому Codepen.
Почніть із створення розділу з оболонкою класу для розміщення анімації.
Потім створіть 10 елементів div, які представлятимуть бульбашки. Усередині кожного div створіть span із крапкою класу. Ви можете вивчити ці важливі теги HTML за 10 хвилин, якщо ви новачок у HTML.
<body>
<section class="wrapper">
<h1>Animated Background</h1>
<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>
</body>
Стиль за допомогою коду CSS
Ви можете створювати неймовірні фонові ефекти, використовуючи лише HTML. Але для цього проекту ви будете використовувати CSS для стилізації та анімації фону.
Спочатку встановіть поля та відступи на 0, щоб уникнути прогалин навколо фону.
* {
margin: 0;
padding: 0;
}
Потім стилізуйте батьківський розділ за допомогою класу оболонки. Цей розділ матиме 100% ширини та висоти, щоб заповнити всю сторінку. Встановіть його фоновий колір як відтінок синього та задайте йому абсолютне положення.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Стиль H1 також з абсолютною позицією. Щоб розташувати його в центрі сторінки, почніть із встановлення верхнього лівого положення на 50%. Потім скористайтеся перекладом, щоб перемістити його вгору та ліворуч, щоб його центр був точно посередині.
.wrapper h1 {
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;
}
Далі, стилізуйте divs, які будуть круглими, щоб діяти як анімовані бульбашки. Надайте кожному div висоту, ширину та рамку. Великий радіус кордону гарантує, що межа є колом. Крім того, установіть тривалість анімації за допомогою властивості CSS 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%;
}
Далі скористайтеся селектором n-го дочірнього елемента, щоб розташувати кожен div з різними налаштуваннями. Ви можете назвати анімацію animate; ви визначите його пізніше за допомогою @keyframes.
Використовуйте nth-child(2) для звернення до першого div, оскільки першим дочірнім елементом .wrapper є h1.
.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 можна створювати різні типи анімації. До них відноситься зміна кольору фону та затримка виконання анімації.
Ви також можете встановити частоту запуску анімації, навіть до нескінченності. Ви також можете встановити напрямок руху анімації: вперед або назад. Весело грати з анімаціями, і ви можете використовувати їх, щоб оживити свої програми.