SCSS
html,
body {
background-color: #EEE;
height: 100%;
width: 100%;
}
html {
position: fixed;
}
.moving-backgrounds {
height: 100%;
width: 100%;
position: relative;
}
.layer {
background-position-y: bottom;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
position: absolute;
width: 140%;
@media (max-width: 768px) {
height: calc(100% - 120px);
}
}
.yellow {
animation: wave 9s 0.1s infinite linear;
background-image: url('http://imgh.us/yellow_1.svg');
top: -250px;
right: -60%;
z-index: 3;
}
.orange {
animation: wave 5s 0.1s infinite linear;
background-image: url('http://imgh.us/orange_2.svg');
left: -20%;
top: -80px;
z-index: 2;
@media (max-width: 768px) {
top: -50px;
}
}
.blue {
animation: wave 12s 0.1s infinite linear;
background-image: url('http://imgh.us/blue_5.svg');
left: -20%;
top: 160px;
@media (max-width: 768px) {
top: 70px;
}
}
@keyframes wave {
0% {
transform: rotateZ(0deg) translate3d(0, 10%, 0) rotateZ(0deg);
}
100% {
transform: rotateZ(360deg) translate3d(0, 10%, 0) rotateZ(-360deg);
}
}
2 Responses