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

Анимированный фон веб-страницы на CSS

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

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

Как пример с изменением изображение от demo страницы:

Установка:

HTML

Код

<div class="kodnoy-senoku demasu-megena" style="background-image: url('Ссылка на фон изображение');">
  <div class="mevsuna1"></div>
  <div class="mevsuna2"></div>
  <div class="mevsuna3"></div>
  <div class="mevsuna4"></div>
  <div class="animatron">
  <a>Клик</a>
  </div>
  <div class="voduslen">
  <p>САЙТ <span class="text-color">ZORNET.RU</span></p>
  </div>
</div>
<div class="nsania-kolonu">
</div>

CSS

Код

body
{
  margin:0;
  padding:0;
  background-color: #2d2e33;
}

* {
  -webkit-box-sizing: mevsuna-box;
  box-sizing: mevsuna-box;
  outline: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.demasu-megena {
  background-size: cover;
  min-height: 400px;
  position: relative;
  background-position: center center;
  overflow:hidden;
}

.demasu-megena .mevsuna1 {
  top: 0%;
  left: 14%;
  position: absolute;
  height: 100%;
  width: 1px;
  border-left: 1px solid rgba(234, 234, 234, 0.2);
}

.demasu-megena .mevsuna1:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: -2px;
  width: 4px;
  height: 30px;
  -webkit-animation: scroll1 6s ease-out infinite;
  animation: scroll1 6s ease-out infinite;
  background: #88C13E;
}

.demasu-megena .mevsuna2 {
  top: 0%;
  left: 50%;
  position: absolute;
  height: 100%;
  width: 2px;
  border-left: 1px solid rgba(234, 234, 234, 0.2);
}

.demasu-megena .mevsuna2:before {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;
  width: 4px;
  height: 30px;
  -webkit-animation: scroll2 6s ease-out infinite;
  animation: scroll2 6s ease-out infinite;
  background: #88C13E;
  overflow: hidden;
}

.demasu-megena .mevsuna3 {
  top: 120px;
  position: absolute;
  height: 1px;
  width: 100%;
  border-bottom: 1px solid rgba(234, 234, 234, 0.2);
}

@media only screen and (max-width: 1518px) and (min-width: 1200px)
.demasu-megena .mevsuna4 {
  top: 87%;
}

.demasu-megena .mevsuna4 {
  top: 80%;
  left: 50%;
  position: absolute;
  height: 1px;
  width: 50%;
  border-bottom: 1px solid rgba(234, 234, 234, 0.2);
}

.demasu-megena .mevsuna4:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 30px;
  height: 4px;
  -webkit-animation: scroll3 7s ease-out infinite;
  animation: scroll3 7s ease-out infinite;
  background: #88C13E;
}

@-webkit-keyframes scroll1 {
  0% {
  opacity: 1;
  bottom: 0; }
  50% {
  bottom: 50%; }
  100% {
  bottom: 100%;
  opacity: 0.5; } }

@keyframes scroll1 {
  0% {
  opacity: 1;
  bottom: 0; }
  50% {
  bottom: 50%; }
  100% {
  bottom: 100%;
  opacity: 0.5; }
}

@-webkit-keyframes scroll2 {
  0% {
  opacity: 1;
  top: 0; }
  50% {
  top: 50%; }
  100% {
  top: calc(100% - 30px);
  opacity: 0.5; } }

@keyframes scroll2 {
  0% {
  opacity: 1;
  top: 0; }
  50% {
  top: 50%; }
  100% {
  top: calc(100% - 30px);
  opacity: 0.5; }
}

@-webkit-keyframes scroll3 {
  0% {
  opacity: 1;
  left: 0; }
  50% {
  left: 50%; }
  100% {
  left: 100%;
  opacity: 0.5; } }

@keyframes scroll3 {
  0% {
  opacity: 1;
  left: 0; }
  50% {
  left: 50%; }
  100% {
  left: 100%;
  opacity: 0.5; }
}

.demasu-megena .animatron {
  position: absolute;
  top: 70%;
  left: 10%;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 70px;
  height: 70px;
  background: rgba(134, 220, 23, 0.4);
  text-align: center;
  border-radius: 50%;
  -webkit-animation: ripple-white 1s linear infinite;
  animation: ripple-white 1s linear infinite;
  line-height: 38px;
}

@-webkit-keyframes ripple-white {
  0% {
  -webkit-box-shadow: 0 0 0 0 rgba(112, 167, 42, 0.1), 0 0 0 20px rgba(112, 167, 42, 0.1), 0 0 0 40px rgba(112, 167, 42, 0.1);
  box-shadow: 0 0 0 0 rgba(112, 167, 42, 0.1), 0 0 0 20px rgba(112, 167, 42, 0.1), 0 0 0 40px rgba(112, 167, 42, 0.1); }
  100% {
  -webkit-box-shadow: 0 0 0 20px rgba(112, 167, 42, 0.1), 0 0 0 40px rgba(112, 167, 42, 0.1), 0 0 0 60px rgba(129, 187, 52, 0);
  box-shadow: 0 0 0 20px rgba(112, 167, 42, 0.1), 0 0 0 40px rgba(112, 167, 42, 0.1), 0 0 0 60px rgba(129, 187, 52, 0); } }

@keyframes ripple-white {
  0% {
  -webkit-box-shadow: 0 0 0 0 rgba(112, 167, 42, 0.1), 0 0 0 20px rgba(112, 167, 42, 0.1), 0 0 0 40px rgba(112, 167, 42, 0.1);
  box-shadow: 0 0 0 0 rgba(112, 167, 42, 0.1), 0 0 0 20px rgba(112, 167, 42, 0.1), 0 0 0 40px rgba(112, 167, 42, 0.1); }
  100% {
  -webkit-box-shadow: 0 0 0 20px rgba(112, 167, 42, 0.1), 0 0 0 40px rgba(112, 167, 42, 0.1), 0 0 0 60px rgba(129, 187, 52, 0);
  box-shadow: 0 0 0 20px rgba(112, 167, 42, 0.1), 0 0 0 40px rgba(112, 167, 42, 0.1), 0 0 0 60px rgba(129, 187, 52, 0); } }

@-webkit-keyframes pulse1 {
  0% {
  -webkit-box-shadow: 0 0 0 0 rgba(129, 187, 52, 0.4);
  box-shadow: 0 0 0 0 rgba(129, 187, 52, 0.4); }
  70% {
  -webkit-box-shadow: 0 0 0 10px rgba(129, 187, 52, 0.2);
  box-shadow: 0 0 0 10px rgba(129, 187, 52, 0.2); }
  100% {
  -webkit-box-shadow: 0 0 0 0 rgba(112, 167, 42, 0.1);
  box-shadow: 0 0 0 0 rgba(112, 167, 42, 0.1); } }

@keyframes pulse1 {
  0% {
  -webkit-box-shadow: 0 0 0 0 rgba(129, 187, 52, 0.4);
  box-shadow: 0 0 0 0 rgba(129, 187, 52, 0.4); }
  70% {
  -webkit-box-shadow: 0 0 0 10px rgba(129, 187, 52, 0.2);
  box-shadow: 0 0 0 10px rgba(129, 187, 52, 0.2); }
  100% {
  -webkit-box-shadow: 0 0 0 0 rgba(112, 167, 42, 0.1);
  box-shadow: 0 0 0 0 rgba(112, 167, 42, 0.1); } }

.demasu-megena .animatron a {
  font-size: 15px;
  position: relative;
  z-index: 9;
  top: 14px;
  left: 2px;
  color:white;
}

@media only screen and (max-width: 1518px) and (min-width: 1200px)
.demasu-megena .animatron {
  top: 85%;
}

.nsania-kolonu
{

}

.demasu-megena .voduslen {
  position: absolute;
  top: 77%;
  right: 5%;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}

.voduslen p{
  color: white;
  font-size: 36px;
  font-family: sans-serif;
  letter-spacing: 4px;
}

.text-color{
  background-color: #5d904d;
  padding: 0px 20px;
}

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

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

05 Апреля 2020 Загрузок: 5 Просмотров: 1784 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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