CSS3: фон страницы из неба с бегущими облаками

Просто копируем прилагаемый стиль, делаем раздел с id="clouds", а в нём облака CSS-классов cloud x1, ..., cloud x5, можно, конечно, ещё дорисовать стилей.

Потом куда-нибудь внутрь встраиваем свою разметку. Получаем страничку на фоне неба с бегущими облаками.

В IE11 облака не двигаются, в текущем Firefox - да, а в Вашем браузере?

Ниже прикреплён исходник и ссылка на него онлайн.

 Пример странички на фоне неба с бегущими облаками, сделанных через CSS3 (4 Кб)

<style type="text/css">
* { 
 margin: 0; padding: 0; /*нет оступов от краёв окна*/
} 
body { 
 overflow: hidden; /*нет горизонтального скроллинга*/
} 
#clouds{
 padding: 80px 0; /*Отступ сверху*/
 background: #3333FF; /*Фон*/
 background: -webkit-linear-gradient(top, #3333FF 45%, #FFFFFF 100%); /*Градиент*/
 background: -linear-gradient(top, #3333FF 45%, #FFFFFF 100%);
 background: -moz-linear-gradient(top, #3333FF 45%, #FFFFFF 100%);
}
.cloud {
 width: 240px; 
 height: 70px;
 background: #EEEEEE;
 border-radius: 210px;
 -moz-border-radius: 210px;
 -webkit-border-radius: 210px;
 position: relative; 
}
.cloud:before, .cloud:after {
 content: '';
 position: absolute; 
 background: #EEEEEE;
 width: 120px; height: 90px;
 position: absolute; top: -15px; left: 20px;
 border-radius: 120px;
 -moz-border-radius: 120px;
 -webkit-border-radius: 120px;
 -webkit-transform: rotate(33deg);
 transform: rotate(33deg);
 -moz-transform: rotate(33deg);
}
.cloud:after {
 width: 125px; height: 120px;
 top: -60px; left: auto; right: 15px;
}
.x1 {
 -webkit-animation: moveclouds 11s linear infinite;
 -moz-animation: moveclouds 11s linear infinite;
 -o-animation: moveclouds 11s linear infinite;
}
.x2 {
 left: -200px; top: 0px;
 -webkit-transform: scale(0.55); /*размеры*/
 -moz-transform: scale(0.55);
 transform: scale(0.55);
 opacity: 0.55; /*прозрачность, пропорционально размеру*/
 -webkit-animation: moveclouds 15s linear infinite; /*время в сек.*/
 -moz-animation: moveclouds 15s linear infinite;
 -o-animation: moveclouds 15s linear infinite;
}
.x3 {
 left: 400px; top: -100px;
 -webkit-transform: scale(0.7);
 -moz-transform: scale(0.7);
 transform: scale(0.7);
 opacity: 0.7;
 -webkit-animation: moveclouds 17s linear infinite;
 -moz-animation: moveclouds 17s linear infinite;
 -o-animation: moveclouds 17s linear infinite;
}
.x4 {
 left: 470px; top: -250px;
 -webkit-transform: scale(0.65);
 -moz-transform: scale(0.65);
 transform: scale(0.65);
 opacity: 0.65;
 -webkit-animation: moveclouds 14s linear infinite;
 -moz-animation: moveclouds 14s linear infinite;
 -o-animation: moveclouds 14s linear infinite;
}
.x5 {
 left: -180px; top: 0px;
 -webkit-transform: scale(0.75);
 -moz-transform: scale(0.75);
 transform: scale(0.75);
 opacity: 0.75;
 -webkit-animation: moveclouds 19s linear infinite;
 -moz-animation: moveclouds 19s linear infinite;
 -o-animation: moveclouds 19s linear infinite;
}

@-webkit-keyframes moveclouds {
 0% {margin-left: 100%;}
 100% {margin-left: -100%;}
}
@-moz-keyframes moveclouds {
 0% {margin-left: 100%;}
 100% {margin-left: -100%;}
}
@-o-keyframes moveclouds {
 0% {margin-left: 100%;}
 100% {margin-left: -100%;}
}
.text {
 margin: 10px; padding: 10px; 
}
</style>
<div id="clouds">
 <div class="cloud x1"></div>
 <div class="cloud x2"></div>

<div align="center" class="text">
 <h1>Место для Вашего контента</h1>
 <p>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
 <p>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
 <p>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
  <br>Blah-blah-blah...
 </p>
</div> 

 <div class="cloud x3"></div>
 <div class="cloud x4"></div>
 <div class="cloud x5"></div>

</div>

14.09.2017, 17:18 [2514 просмотров]