ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация фона для сайта на HTML + CSS

Анимация фона для сайта на HTML + CSS

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

Все безусловно зависит о том, что именно будет выводить на фоне, и здесь вы найдете такие форматы, как мерцание звезд, где фон можно самостоятельно выставлять на всех трех экземпляров. Также будет анимация круга, что возможно видели, где веб-разработчики ставят на логотип, который крутится, скорость аналогично задается вами. И остаются плывущие облака, что смотрится красиво, и такой фон можно видеть на разных тематических ресурсах.

Красивая анимация фоны для блоков сайта


Установка:

1. Вариант

Крутой анимированный фон для сайта

Крутящийся элемент при заданной скорости

HTML

Код
<div class="spinning-element">
  <img class="circle-picture" src="https://rataku.com/images/2023/08/31/noavatar.jpg"/>
</div>

CSS

Код
.spinning-element{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #053629;
  height: 345px;
}
.circle-picture {
  width: 150px;
  -webkit-animation-name: rotation;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: rotation;
  -moz-animation-duration: 15s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -o-animation-name: rotation;
  -o-animation-duration: 15s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  animation-name: rotation;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
   
@-webkit-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);}
}
@-moz-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);}
}
@-o-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);}
}
@keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
  -moz-transform:rotate(720deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);}
}

Здесь прописан background, где мы может выставить оттенок фона, что можно убрать.

Демонстрация

2. Вариант

Элемент мерцание звёзд на чистом CSS

Как сделать красивую анимацию фона на HTML и CS

HTML

Код
<div class="mesania-sved">
  <div class="pervaya-zvezda"></div>
  <div class="vtoraya-zvezda"></div>
  <div class="treteya-zvezda"></div>
</div>

CSS

Код
.mesania-sved {
  position: relative;
  overflow: hidden;
  height: 372px;
  margin-bottom: -372px;
  background: #102336;
}
.pervaya-zvezda, .vtoraya-zvezda, .treteya-zvezda{
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;  
  opacity: 0;  
  background: url('https://rataku.com/images/2023/08/31/stars_3.png');  
  -webkit-animation: mesania-sved 5s linear infinite;
  animation: mesania-sved 5s linear infinite;
}
.vtoraya-zvezda {
  background-position: 98px 98px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.treteya-zvezda {
  background-image: url('https://rataku.com/images/2023/08/31/stars_3.png');
  background-position: 345px 98px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
@-webkit-keyframes mesania-sved {
  0%, 50%, 100% {opacity: 0;}
  1%, 49% {opacity: 1;}
}
@keyframes mesania-sved {
  0%, 50%, 100% {opacity: 0;}
  5%, 45% {opacity: 1;}
}

Здесь в стилистике присутствует изображение звезд, что идут формате PNG.

Демонстрация

3. Вариант

Анимированные фоны для блоков

Элемент на плывущие облака на чисто CSS

HTML

Код
<div class="plyvus-oblaka">
  <div class="floating-clouds"></div>
</div>

CSS

Код
.plyvus-oblaka{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1d4570;
  height: 348px;
}
.floating-clouds {
  background: url('https://rataku.com/images/2023/08/31/sky.png'); /* Путь к картинке */
  background-position: 0 0;
  background-repeat: repeat;
  animation: animated-sky 60s linear infinite;
  width: 100%;
  height: 348px;
}
@keyframes animated-sky {
  from { background-position: 800px 0; }
  to { background-position: 0 0; }
}

Здесь аналогично идет формат PNG на изображение, виде облаков.

Демонстрация
31 Августа 2023 Загрузок: 3 Просмотров: 781 Комментариев: (2)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 2
Nikas
Nikas 06 Сентября 2023 17:321
0
а есть фон который движется за курсором ? 07a
Kosten
Kosten 06 Сентября 2023 20:332
0
Нет на сайте такого, но встречал, правда давно.
Войдите:
avatar