• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Фоновая анимация виде облаков на CSS3 (Анимация движущихся облаков с помощью чистого CSS)
Фоновая анимация виде облаков на CSS3
Kosten
Дата: Воскресенье, 2019-11-03, 19:30 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25086
Награды: 57


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



HTML

Код
<div id="desamulad"></div>
<div id="lopedsavtun">
  <h1>ZorNet.Ru — сайт для вебмастера</h1>  
</div>

CSS

Код
html { height: 100%; }
body {
  margin: 0;
  font-family: Livvic, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

h1 {
  color: #43607e;
  text-align: center;
  letter-spacing: .8em;
}

#desamulad {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/1572798250.jpg);
  background-size: cover;
  background-position: center top;
  animation: bgAnim 20s infinite;
}

#lopedsavtun {
  position: relative;
}

@keyframes bgAnim {
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

На этом установка завершена.

Демонстрация
Прикрепления: 2379573.jpg(28.8 Kb) · background.zip(2.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Фоновая анимация виде облаков на CSS3 (Анимация движущихся облаков с помощью чистого CSS)
  • Страница 1 из 1
  • 1
Поиск: