Надеюсь туда кинул....
Короче это живой поверхностный фон (думаю зайдет для ролевок на ура, так как вместо облаков можно что хочешь гнать в шапке....подходит и на аватарки [пробовал]....короче на все изображения).
Анимированные облака с помощью CSS3 как средство анимации без использования JavaScript
Красивый CSS эффект, накладывающий летящие облака на вашу фоновую фотографию или шапку сайта
Рабочий пример:
[html]<style> .cloud {
overflow: hidden;
position: relative;
width:100%;
padding-bottom: 56.25%;
height: 0;
background: url(https://i.imgur.com/pOKivQB.png);
background-size: cover;
}
.cloud-content {
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
} </style>
<div class="cloud">
<div class="cloud-content">
Текст на фоне
</div>
<img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud1">
<img src="https://i.imgur.com/WjQH496.png" alt="" class="cloud2">
<img src="https://i.imgur.com/27rFvYX.png" alt=""
class="cloud3">
<img src="https://i.imgur.com/VZg0Ywh.png" alt="" class="cloud4">
</div>
[/html]
CSS:
HTML:
