Анимация делает любой веб-сайт более привлекательным для посетителей. Здесь мы использовали только HTML и CSS для создания анимированных эффектов на фоне веб-страницы. Вы можете использовать этот тип анимации на главной странице любого веб-сайта. В приведенном видеоуроке показан пошаговый процесс создания этого фрагмента.
Добавление некоторой анимации на ваш сайт поможет ему выделиться на фоне других сайтов конкурентов. Интересный способ сделать это - использовать фоновую анимацию CSS. С помощью такого вида фоновой анимации разработчики могут придать визуальный интерес любому контенту веб-сайта. Этот тип анимации играет очень полезную роль в привлечении внимания к определенным элементам страницы.
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Все демонстрационные изображения
- Исходные файлы HTML
- Исходные файлы CSS
- Исходные файлы jаvascript
- Иконки шрифтов
- Файлы библиотеки и плагинов
В нашем сегодняшнем фрагменте мы создали несколько квадратных элементов разного размера. Затем мы распределили их по экрану просмотра, используя фиксированное положение и значения left. Каждому элементу присваивается отдельное значение задержки анимации, чтобы они анимировались один за другим, а не все сразу.
С учетом эстетики квадратным фигурам придан эффект свечения, который хорошо смотрится на черном фоне. Затем каждому пространственному или квадратному элементу присваивается общее значение анимации. После этого мы использовали ключевые кадры для определения последовательности анимации, а затем применили анимацию к квадратному элементу так, чтобы они появлялись снизу и исчезали при движении вверх.
Исходный код
Сначала создайте файлы HTML и CSS и свяжите файл CSS с файлом HTML. Затем скопируйте код из приведенного ниже поля кода и вставьте его в свой проект. Сохраните код и откройте его в своем браузере, чтобы проверить, работает ли код должным образом.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Background using HTML and CSS | No jаvascript</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="banner">
<div class="content">
<h2><b>Animation</b></h2>
</div>
</div>
</body>
</html>CSS КОД:
<style>
body {
background: #111;
height: 100vh;
}
.wrapper span {
position: fixed;
bottom: -180px;
height: 50px;
width: 50px;
z-index: -1;
background-color: #18191f;
box-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff, 0 0 200px #0072ff;
animation: animate 10s linear infinite;
}
.wrapper span:nth-child(1) {
left: 60px;
animation-delay: 0.6s;
}
.wrapper span:nth-child(2) {
left: 10%;
animation-delay: 3s;
width: 60px;
height: 60px;
}
.wrapper span:nth-child(3) {
left: 20%;
animation-delay: 2s;
}
.wrapper span:nth-child(4) {
left: 30%;
animation-delay: 5s;
width: 80px;
height: 80px;
}
.wrapper span:nth-child(5) {
left: 40%;
animation-delay: 1s;
}
.wrapper span:nth-child(6) {
left: 50%;
animation-delay: 7s;
}
.wrapper span:nth-child(7) {
left: 60%;
animation-delay: 6s;
width: 100px;
height: 100px;
}
.wrapper span:nth-child(8) {
left: 70%;
animation-delay: 8s;
}
.wrapper span:nth-child(9) {
left: 80%;
animation-delay: 6s;
width: 90px;
height: 90px;
}
.wrapper span:nth-child(10) {
left: 90%;
animation-delay: 4s;
}
.banner {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.content h2 b {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #fff;
font-family: montserrat;
font-size: 80px;
text-transform: uppercase;
letter-spacing: 12px;
}
@keyframes animate {
0% {
transform: translateY(0);
opacity: 1;
}
80% {
opacity: .7;
}
100% {
transform: translateY(-800px) rotate(360deg);
opacity: 0;
}
}
</style>
