Красивый эффект, который накладывает летящие облака на произвольный фон.
Облака - это изображения облаков на прозрачном фоне в формате .png или .webp. Заготовки можно найти в интернете на свой вкус и под задачу - белые летние облака, либо темные грозовые.
HTML
<div class="cloud">
<div class="cloudcontent">
Текст на фоне
</div>
<img src="cloud-01.png" alt="" class="cloud1">
<img src="cloud-02.png" alt="" class="cloud2">
<img src="cloud-03.png" alt="" class="cloud3">
<img src="cloud-04.png" alt="" class="cloud4">
</div>
CSS
.cloud {
overflow: hidden;
position: relative;
width:100%;
padding-bottom: 56.25%;
height: 0;
background: url(mountain.jpg);
background-size: cover;
}
.cloudcontent {
position: relative;
padding:30px;
color: #337AB7;
font-size:22px;
font-weight:bold;
z-index:100;
}
.cloud 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 animCloud {
from {
-webkit-transform: translateX(100%)
}
to {
-webkit-transform: translateX(-100%)
}
}
@-moz-keyframes animCloud {
from {
-moz-transform: translateX(100%)
}
to {
-moz-transform: translateX(-100%)
}
}
@keyframes animCloud {
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%)
}
}
.cloud1 {
-webkit-animation: animCloud 20s infinite linear;
-moz-animation: animCloud 20s infinite linear;
animation: animCloud 20s infinite linear
}
.cloud2 {
-webkit-animation: animCloud 40s infinite linear;
-moz-animation: animCloud 40s infinite linear;
animation: animCloud 40s infinite linear
}
.cloud3 {
-webkit-animation: animCloud 60s infinite linear;
-moz-animation: animCloud 60s infinite linear;
animation: animCloud 60s infinite linear
}
.cloud4 {
-webkit-animation: animCloud 80s infinite linear;
-moz-animation: animCloud 80s infinite linear;
animation: animCloud 80s infinite linear
}