@property --a {
syntax: '<angle>';
initial-value: 0deg;
inherits: false
}
html {
--pattern:
repeating-linear-gradient(var(--a),
#777, #fff, #777 2em);
--map:
linear-gradient(90deg, #888, #fff);
height: 100%;
background: var(--pattern), var(--map);
background-blend-mode: multiply;
filter: contrast(24);
animation: a 32s linear infinite
}
html:not(:hover) { animation-play-state: paused }
@keyframes a { to { --a: .5turn } }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.