Задать вопрос
FitTech
@FitTech
html

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

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

+ сами слайды меняются с помощью js (хотя можно было тоже на кейфреймах это сделать, ибо всего 3 слайда).
Поверх него наложена сетка (можно хоть 1пиксельной картинкой делать или еще как угодно). Все крайне просто.
Вам никто не мешает изучить как у них все сделано через f12, стили у них не минимизированные.
Ответ написан
1 комментарий
1 комментарий
@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') на картинку если видео не запустилось

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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Ещё заказы