animiereter_hintergrund_2.php

Quell Code

<style>
	@charset "UTF-8";
[type=checkbox] {
  position: absolute;
  left: -100vw;
}
[type=checkbox] + label {
  --c-hl: dimgrey;
  display: flex;
  align-items: center;
  color: var(--c-sel, var(--c-hl));
  font: 1.5rem/1 ubuntu mono, consolas, monaco, monospace;
  cursor: pointer;
}
[type=checkbox] + label:before {
  margin-right: 0.375em;
  width: 1em;
  height: 1em;
  box-shadow: 0 0 0 2px var(--c-sel, var(--c-hl));
  text-align: center;
  color: var(--c-sel, transparent);
  content: "?";
}
[type=checkbox]:focus + label, [type=checkbox]:hover + label {
  --c-hl: #a20722 ;
}
[type=checkbox]:checked + label {
  --c-sel: #eb1f46 ;
}

html {
  --c0: #f90;
  --c1: #444;
  height: 100vh;
  background: radial-gradient(circle at var(--o, 50% 50%), var(--c0) var(--pos, 0%), var(--c1) 0);
  animation: a 0s infinite;
  animation-name: c0, o, pos, c1;
  animation-duration: 2s, 20s, 1s;
  animation-timing-function: steps(1), steps(1), ease-in-out;
}

@keyframes o {
  0% {
    --o: 81% 84% ;
  }
  5% {
    --o: 34% 64% ;
  }
  10% {
    --o: 48% 66% ;
  }
  15% {
    --o: 28% 32% ;
  }
  20% {
    --o: 4% 44% ;
  }
  25% {
    --o: 93% 66% ;
  }
  30% {
    --o: 16% 48% ;
  }
  35% {
    --o: 21% 13% ;
  }
  40% {
    --o: 90% 48% ;
  }
  45% {
    --o: 42% 12% ;
  }
  50% {
    --o: 59% 45% ;
  }
  55% {
    --o: 86% 94% ;
  }
  60% {
    --o: 28% 30% ;
  }
  65% {
    --o: 58% 100% ;
  }
  70% {
    --o: 28% 38% ;
  }
  75% {
    --o: 59% 49% ;
  }
  80% {
    --o: 53% 55% ;
  }
  85% {
    --o: 71% 86% ;
  }
  90% {
    --o: 23% 75% ;
  }
  95% {
    --o: 88% 2% ;
  }
}
@keyframes pos {
  90%, 100% {
    --pos: 100% ;
  }
}
@keyframes c0 {
  50% {
    --c0: #444 ;
  }
}
@keyframes c1 {
  50% {
    --c1: #f90 ;
  }
}
</style>
<script>
	CSS.registerProperty({
  name: '--o',
  syntax: '<length-percentage>+',
  initialValue: '50%',
  inherits: true });


CSS.registerProperty({
  name: '--pos',
  syntax: '<length-percentage>',
  initialValue: '0%',
  inherits: true });


CSS.registerProperty({
  name: '--c0',
  syntax: '<color>',
  initialValue: 'red',
  inherits: true });


CSS.registerProperty({
  name: '--c1',
  syntax: '<color>',
  initialValue: 'red',
  inherits: true });
</script>