ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект движение тумана на фоне картинки

Эффект движение тумана на фоне картинки

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

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

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

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

HTML

Код

CSS

Код

.denugil-kopasved {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 531px;
  overflow: hidden;
  background: url("http://zornet.ru/ABVUN/Abas/degakolas/dsanu/fog.jpg") center center;
  background-size: cover;
}
.denugil-kopasved::before,
.denugil-kopasved::after,
.denugil-kopasved div::before,
.denugil-kopasved div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: repeat-x;
}
.denugil-kopasved div::before,
.denugil-kopasved div::after {
  left: 100%;
}
.denugil-kopasved::before,
.denugil-kopasved div::before {
  background-image: url("http://zornet.ru/ABVUN/Abas/degakolas/dsanu/fog-1.png");
  animation: fogmove 15s linear 0s infinite;
}
.denugil-kopasved::after,
.denugil-kopasved div::after {
  background-image: url("http://zornet.ru/ABVUN/Abas/degakolas/dsanu/fog-2.png");
  animation: fogmove 9s linear 0s infinite;
}
@keyframes fogmove {
  from {
  transform: translate3d(0, 0, 0);
  }
  to {
  transform: translate3d(-100%, 0, 0);
  }
}

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

Демонстрация
Источник: atuin.ru

24 Февраля 2019 Загрузок: 1 Просмотров: 1242 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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