В этой простой демонстрации объясняется, как использовать анимацию CSS для создания интересных визуальных эффектов.

Добавление анимированного фона на ваш веб-сайт или приложение может способствовать созданию уникального и интересного дизайна. Креативные фоны могут вызывать эмоции и улучшать пользовательский опыт.

Существует множество способов создать анимированный фон для вашего приложения, но особенно хорошо работает простая комбинация простого HTML и CSS. Ознакомьтесь с этим примером, узнайте, как работает его код, и посмотрите живую демонстрацию окончательного анимированного фона.

Создайте HTML-структуру

Вам нужно создать синий фон с пузырьками, которые растут и плавают вверх. Конечный результат вы можете увидеть здесь Коден.

Начните с создания раздел с классом обертка для размещения анимации.

Затем создайте 10 элементов div, которые будут представлять пузырьки. Внутри каждого div создайте диапазон с классом точка. Ты можешь выучите эти важные HTML-теги за 10 минут если вы новичок в HTML.

instagram viewer 
<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="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%. Затем используйте функцию перевода, чтобы переместить его вверх и влево, чтобы его центр находился точно посередине.

.wrapperh1 {
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 высоту, ширину и границу. Большой радиус границы гарантирует, что граница представляет собой круг. Кроме того, установите продолжительность анимации, используя свойство анимации CSS.

.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}

Оформите точки высотой и шириной 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 с разными настройками. Вы можете назвать анимацию оживлять; вы определите его позже, используя @keyframes.

Использовать n-й ребенок (2) обратиться к первому div с момента рождения первого ребенка .обертка элемент – это ч1.

.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}
.wrapperdiv:nth-child(3) { 
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(4) { 
top: 40%;
left: 40%; 
animation: animate 3slinearinfinite;
}


.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}

Вы можете задать более высокие проценты нижним элементам, чтобы они поднимались вверх с разными интервалами.

.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}
.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}


.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}

Используйте @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. К ним относятся изменение цвета фона и задержка времени выполнения анимации.

Вы также можете установить частоту запуска анимации, вплоть до бесконечности. Вы также можете установить направление, в котором должна двигаться анимация: вперед или назад. Играть с анимацией весело, и вы можете использовать ее, чтобы оживить свои приложения.