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

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

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

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

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

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

Приступаем к установке:

HTML

Код

<header>
  <nav>
  <h1 class="samud-savun"><a href="#">Zornet.ru</a></h1>
  <ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Скрипты</a></li>
  </ul>
  </nav>
</header>

CSS

Код

header {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
}

header:before {
  content: "";
  width: 100%;
  z-index: -1;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: grow 60s linear .5s infinite;
  background: linear-gradient(rgba(126, 157, 230, 0.48), rgba(25, 67, 166, 0.53)), url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat fixed top center / cover;
}

header nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

header nav .samud-savun {
  color: #f1ebeb;
  font-size: 27px;
  text-transform: uppercase;
  padding: 18px 19px 9px 18px;
}

header nav .samud-savun a { color: #f1ebeb; }

header nav ul {
  display: flex;
  flex-wrap: wrap;
}

header nav li a {
  color: #f1ebeb;
  display: block;
  position: relative;
  padding: 20px 20px 10px;
}

header nav li a:before, header nav li a:after {
  content: "";
  bottom: 0;
  width: 0px;
  height: 2px;
  display: block;
  position: absolute;
  background-color: #f1ebeb;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

header nav li a:before { right: 50%; }
header nav li a:after { left: 50%; }

header nav li a:hover:before , header nav li a:hover:after {
  width: 50%;
}

@keyframes grow {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.6) rotate(10deg);}
}

@-webkit-keyframes grow {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.6) rotate(10deg);}
}

@media only screen and (max-width: 290px) {
  header nav ul {
  width: 100%;
  text-align: center;
  flex-direction: column;
  }
}

Для начало вы можете посмотреть полностью дизайн с подключенными функциями, что присутствует на demo, где увидите, что на странице не чего лишнего нет. Что только остается самому веб мастеру ее заполнить, но главное, этот оригинальный стиль, плюс навигация присутствует.

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

08 Января 2019 Загрузок: 1 Просмотров: 942 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0