SCSS
$colors: (#60479b, #34acbb, #abc1af, #f1367b);
$max-lines: 4;
$max-translate: 60;
body {
background: #d0c6ce;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 56vh;
height: 80vh;
overflow: hidden;
background: linear-gradient(to right, $colors);
background-position: center;
background-size: 120%;
transform: translate(-50%, -50%);
box-shadow: -4vh 4vh 5px rgba(#b9807c, .4);
}
.line {
width: 100%;
height: 1%;
background: linear-gradient(to right, $colors);
$i: 1;
@while $i <= 100 {
$lines: random($max-lines);
$move: random($max-translate * 2) - $max-translate;
&:nth-child(n+#{$i}):nth-child(-n+#{$i+$lines}) {
transform: translateX($move * 1px);
}
$i: $i + $lines;
}
}
