$filters: (
saturate: (
units: '',
range: (
min: 1,
max: 10
),
probability: 1/5
),
hue-rotate: (
units: 'deg',
probability: 1,
range: (
min: 0,
max: 360
),
),
invert: (
units: '',
probability: 1/30,
range: (
min: 1,
max: 1
),
),
contrast: (
units: '',
probability: 1/10,
range: (
min: 1,
max: 10
),
),
brightness: (
units: '%',
probability: 1/20,
range: (
min: 25,
max: 75
),
)
);
html {
background-color: black;
animation: spazz 7s steps(1) infinite;
}
body {
overflow: hidden;
height: 100vh;
margin: 0;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/marilyn.jpg) 50%/cover;
background-blend-mode: multiply;
animation: inherit;
animation-duration: 17s;
}
@keyframes spazz {
@for $i from 0 through 100 {
@if(random(100) < 66.6) {
#{$i}% {
$filter_css_value: '';
@each $filter, $filter_props in $filters {
@if((random(100) / 100) < map-get($filter_props, probability)) {
$range: map-get($filter_props, range);
$min: map-get($range, min);
$max: map-get($range, max);
$filter_css_value: $filter_css_value + ' #{$filter}(#{random(100) / 100 * ($max - $min) + $min}#{map-get($filter_props, units)})';
}
}
filter: unquote($filter_css_value);
background-color: hsl(random(360), 100%, 70%);
transform: translate(#{random(30) - 15}px, #{random(30) - 15}px) scale(random(20) / 100 + 1.05);
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.