ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированные облака с помощью CSS3

Анимированные облака с помощью CSS3

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

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

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

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

HTML

Код

CSS

Код

.miscons-tanushing {
  height: 480px;
  background: #007fd5;
  position: relative;
  overflow: hidden;
  -webkit-animation: miscons-tanushing_background 50s ease-out infinite;
  -moz-animation: miscons-tanushing_background 50s ease-out infinite;
  -o-animation: miscons-tanushing_background 50s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.nusengerenu {
  background: url("http://zornet.ru/ABVUN/Abas/degakolas/dsanu/wFXd68N.png");
  position: absolute;
  left: 0;
  height: 300%;
  width: 300%;
  -webkit-animation: nusengerenu 50s linear infinite;
  -moz-animation: nusengerenu 50s linear infinite;
  -o-animation: nusengerenu 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.danerinte-gevientdev {
  background: url("http://zornet.ru/ABVUN/Abas/degakolas/dsanu/zc06.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.skasuvarious-neracting {
  background: url("http://zornet.ru/ABVUN/Abas/degakolas/dsanu/clouds-transparent-background-22.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.nelopera-cwsacting {
  background: url("");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

@-webkit-keyframes miscons-tanushing_background {
  0% {
  background: #007fd5;
  color: #007fd5
  }
  50% {
  background: #000;
  color: #a3d9ff
  }
  100% {
  background: #007fd5;
  color: #007fd5
  }
}

@-webkit-keyframes nusengerenu {
  0% {
  opacity: 0;
  left: -200% -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }
  50% {
  opacity: 1;
  -moz-transform: scale(1);
  left: 0% bottom: 250px;
  -webkit-transform: scale(1);
  }
  100% {
  opacity: 0;
  bottom: 500px;
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }
}

@-webkit-keyframes cloud_one {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

@-moz-keyframes miscons-tanushing_background {
  0% {
  background: #007fd5;
  color: #007fd5
  }
  50% {
  background: #000;
  color: #a3d9ff
  }
  100% {
  background: #007fd5;
  color: #007fd5
  }
}

@-moz-keyframes nusengerenu {
  0% {
  opacity: 0;
  left: -200% -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }
  50% {
  opacity: 1;
  -moz-transform: scale(1);
  left: 0% bottom: 250px;
  -webkit-transform: scale(1);
  }
  100% {
  opacity: 0;
  bottom: 500px;
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  }
}

@-moz-keyframes cloud_one {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

@-moz-keyframes cloud_two {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

@-moz-keyframes cloud_three {
  0% {
  left: 0
  }
  100% {
  left: -200%
  }
}

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

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

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

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

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

СКАЧАТЬ

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

Kosten

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