body {
margin: 0;
width: 30vw;
height: 100vh;
background-color:#d50000;
background-image:
linear-gradient(
90deg,
#000000F0,
#FF0000A0 var(--lpos),
#000000C0),
repeating-linear-gradient(
45deg,
rgba(0,0,0,0.8),
rgba(0,0,0,0.8) 100px,
transparent 0px,
transparent 200px
),
repeating-linear-gradient(
-45deg,
rgba(0,0,0,0.5),
rgba(0,0,0,0.5) 100px,
transparent 0px,
transparent 200px
);
background-size: 100%;
animation: move 10s infinite both;
}
@keyframes move{
0% {
--lpos: 0%;
}
25% {
--lpos: 75%;
}
50% {
--lpos: 50%;
}
75% {
--lpos: 25%;
}
100% {
--lpos: 100%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.