<div class="stage" direction="right" style="height: 75vh;">
<div id="clouds-1" class="clouds"></div>
<div id="clouds-2" class="clouds"></div>
<div id="clouds-3" class="clouds"></div>
</div>
.stage {
position: relative;
top: 0;
left: 0;
overflow: hidden;
}
.clouds {
position: absolute;
width: 100%;
height: 500px;
top: 0;
left: 0;
}
#clouds-1 {
background: transparent url(https://torn.com/images/v2/travel_agency/clouds/clouds_3_row.png) left center repeat-x;
animation: pan 80s linear infinite;
}
#clouds-2 {
background: transparent url(https://torn.com/images/v2/travel_agency/clouds/clouds_1_row.png) left center repeat-x;
animation: pan 120s linear infinite;
}
#clouds-3 {
background: transparent url(https://torn.com/images/v2/travel_agency/clouds/clouds_2_row.png) left center repeat-x;
animation: pan 60s linear infinite;
}
@keyframes pan {
from {background-position: 0;}
to {background-position: -2000px;}
}
Si para este tutorial necesitas algún plugin lo podrás encontrar en la pagina de plugins.
