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

Эффект фона из движущихся облаков на CSS

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

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

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

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

HTML

Код

<div class="kestablished">
  <div class="sentiallyka-asfreupgrade">ZorNet.Ru: Портал Вебмастера</div>
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/cloud-zornet.png" alt="" class="kestablished1">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/cloud-rundsaxcv.png" alt="" class="kestablished2">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/cloud-kisaxm.png" alt="" class="kestablished3">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/cloud-karunfsa.png" alt="" class="kestablished4">
  </div>

CSS

Код

.kestablished {
overflow: hidden;
position: relative;
width:100%;
padding-bottom: 57%;
height: 0;
background: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/mountain.jpg);
background-size: cover;
}
.sentiallyka-asfreupgrade {
position: relative;
padding:28px;
color: #175e9a;
font-size:23px;
font-weight:bold;
z-index:100;
}
.kestablished img {
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
@-webkit-keyframes animkestablished {
  from {
  -webkit-transform: translateX(100%)
  }
  to {
  -webkit-transform: translateX(-100%)
  }
}
@-moz-keyframes animkestablished {
  from {
  -moz-transform: translateX(100%)
  }
  to {
  -moz-transform: translateX(-100%)
  }
}
@keyframes animkestablished {
  from {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%)
  }
  to {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%)
  }
}
.kestablished1 {
  -webkit-animation: animkestablished 20s infinite linear;
  -moz-animation: animkestablished 20s infinite linear;
  animation: animkestablished 20s infinite linear
}
.kestablished2 {
  -webkit-animation: animkestablished 40s infinite linear;
  -moz-animation: animkestablished 40s infinite linear;
  animation: animkestablished 40s infinite linear
}
.kestablished3 {
  -webkit-animation: animkestablished 60s infinite linear;
  -moz-animation: animkestablished 60s infinite linear;
  animation: animkestablished 60s infinite linear
}
.kestablished4 {
  -webkit-animation: animkestablished 80s infinite linear;
  -moz-animation: animkestablished 80s infinite linear;
  animation: animkestablished 80s infinite linear
}

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

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

23 Июля 2018 Просмотров: 1712 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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