Задать вопрос

Чем или как сделан такой фон?

  • Вопрос задан
  • 627 просмотров
Подписаться 9 Оценить Комментировать
Решения вопроса 2
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Если речь о движущемся фоне, то он реализован с помощью простого слайдшоу с кейфрейм анимацией.
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: scale(5.0) rotate(80deg);
	}
}

+ сами слайды меняются с помощью js (хотя можно было тоже на кейфреймах это сделать, ибо всего 3 слайда).
Поверх него наложена сетка (можно хоть 1пиксельной картинкой делать или еще как угодно). Все крайне просто.
Вам никто не мешает изучить как у них все сделано через f12, стили у них не минимизированные.
Ответ написан
@televnoy
Конкретно по вопросу вам ответили. Но по желанию можно и видео запихать =)
<!doctype html>
  HTML5 видео в качестве заднего фона
  <link rel="stylesheet" href="style.css" />

  <video autoplay loop muted class="bgvideo" id="bgvideo">
   <source src="http://m.y.co/video/h264/luxury-yacht-charter-video.mp4" type="video/mp4"></source>
  </video>

</!doctype>

ссылку m.y.co/video/h264/luxury-yacht-charter-video.mp4 меняешь на свое видео

body {
  background: url('video.png');
  background-size: cover;
}

.bgvideo {

  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -9999;
}


Ссылку url('video.png') на картинку если видео не запустилось

Также можно добавить перед видео фильтр, точечки или еще что.

Тестовый сайт
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы