Анимация делает любой веб-сайт более привлекательным для посетителей. Здесь мы использовали только HTML и CSS для создания анимированных эффектов на фоне веб-страницы. Вы можете использовать этот тип анимации на главной странице любого веб-сайта. В приведенном видеоуроке показан пошаговый процесс создания этого фрагмента.
Добавление некоторой анимации на ваш сайт поможет ему выделиться на фоне других сайтов конкурентов. Интересный способ сделать это - использовать фоновую анимацию CSS. С помощью такого вида фоновой анимации разработчики могут придать визуальный интерес любому контенту веб-сайта. Этот тип анимации играет очень полезную роль в привлечении внимания к определенным элементам страницы.
В нашем сегодняшнем фрагменте мы создали несколько квадратных элементов разного размера. Затем мы распределили их по экрану просмотра, используя фиксированное положение и значения left. Каждому элементу присваивается отдельное значение задержки анимации, чтобы они анимировались один за другим, а не все сразу.
С учетом эстетики квадратным фигурам придан эффект свечения, который хорошо смотрится на черном фоне. Затем каждому пространственному или квадратному элементу присваивается общее значение анимации. После этого мы использовали ключевые кадры для определения последовательности анимации, а затем применили анимацию к квадратному элементу так, чтобы они появлялись снизу и исчезали при движении вверх.
Исходный код
Сначала создайте файлы HTML и CSS и свяжите файл CSS с файлом HTML. Затем скопируйте код из приведенного ниже поля кода и вставьте его в свой проект. Сохраните код и откройте его в своем браузере, чтобы проверить, работает ли код должным образом.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Background using HTML and CSS | No Javascript</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>
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;
}
}
0 Комментарии