SCSS
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
$fire: #F6080F;
$love: #DA0407;
$wood: #5A2A29;
$grass: #537E64;
$white: #FBFBFB;
body {
display: flex;
position: relative;
overflow: hidden;
transform: translateZ(0);
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
left: -100%;
height: 80%;
width: 300%;
z-index: 1;
background-image:
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-3.svg'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-2.svg'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-1.svg'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-4.svg');
background-repeat: repeat-x;
background-size:
200% 100%,
150% 100%,
300% 100%,
200% 100%;
background-position: 0% 0%;
animation: bg-tween 10000s infinite linear;
}
&:before {
transform: translateY(-50%) rotate(-45deg);
animation-delay: -100s;
}
&:after {
transform: translateY(-50%) rotate(45deg);
animation-delay: -10s;
}
}
@keyframes bg-tween {
100% {
background-position: 100000% 0%;
}
}
.poster {
position: relative;
width: 100%;
height: 80%;
max-width: 400px;
margin: auto;
background-color: #fff;
box-shadow: -30px 30px 60px rgba(black, 0.6);
z-index: 4;
background-image:
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-3.svg'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-2.svg'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-4.svg'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-1.svg');
background-repeat: no-repeat;
background-size: 50% 50%;
background-position:
0% 0%,
100% 0%,
0% 100%,
100% 100%;
}
