.background_box
.background.background--top
.wave.wave--top
.background.background--mid
.wave.wave--mid
.background.background--bot
.wave.wave--bot
View Compiled
.background_box{
position: relative;
height: 100vh;
}
.background{
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
background-image: linear-gradient(-134deg, #2110BA 0%, #FF05D8 100%);
&--top{
z-index: 15;
opacity: 0.5;
}
&--mid{
z-index: 10;
opacity: 0.75;
}
&--bot{
z-index: 5;
}
}
.wave{
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
will-change: transform;
transform-origin: center bottom;
&--top{
animation: move_wave 5s linear infinite;
background-image: url('https://isora.me/public/codepen/wave-top.png');
background-size: 50% 100px;
}
&--mid{
animation: move_wave 10s linear infinite;
background-image: url('https://isora.me/public/codepen/wave-mid.png');
background-size: 50% 120px;
}
&--bot{
animation: move_wave 15s linear infinite;
background-image: url('https://isora.me/public/codepen/wave-bot.png');
background-size: 50% 100px;
}
}
@keyframes move_wave {
0% {
transform: translateX(0) scaleY(1);
}
50%{
transform: translateX(-25%) scaleY(0.55);
}
100% {
transform: translateX(-50%) scaleY(1);
}
}
View Compiled
// none
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.