animerter_hintergrund.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: 100%;
  background: repeating-conic-gradient(var(--c0) 0 var(--pos, 0%), var(--c1) 0 5%);
  animation: a 0s infinite;
  animation-name: c0, pos, c1;
  animation-duration: 2s, 1s;
  animation-timing-function: steps(1), ease-in-out;
}

@keyframes pos {
  90%, 100% {
    --pos: 5% ;
  }
}
@keyframes c0 {
  50% {
    --c0: #444 ;
  }
}
@keyframes c1 {
  50% {
    --c1: #f90 ;
  }
}
</style>
<script>
	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>