fiha

by Petr Haluza

HTML

<div class="scene">
  <h1>Toto umí jen čisté css</h1>
  <div class="floor"></div>
  <div class="shadow">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
    <i style="--i: 6"></i>
    <i style="--i: 7"></i>
    <i style="--i: 8"></i>
    <i style="--i: 9"></i>
  </div>
  <div class="squares">
    <i style="--i: 0"></i>
    <i style="--i: 1"></i>
    <i style="--i: 2"></i>
    <i style="--i: 3"></i>
    <i style="--i: 4"></i>
    <i style="--i: 5"></i>
    <i style="--i: 6"></i>
    <i style="--i: 7"></i>
    <i style="--i: 8"></i>
    <i style="--i: 9"></i>
  </div>
</div>

CSS

*, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box;}
body { background-color: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 800px; overflow: hidden;  }
*:not(:empty) { transform-style: preserve-3d; }

h1 {z-index: 123;  position: absolute;  width: 102px;  left: 135px;  top: -82px; text-shadow: 0 20px 10px black;}

.scene { position: relative; transform: rotateX(60deg) rotateZ(20deg);  --duration: 3s;}
.floor { position: absolute; filter: blur(2px);inset: -20em -40em; background-color: #333; background-image:  radial-gradient(#0000, #000 70%),  repeating-linear-gradient(0deg, #fff1 0 1em, #fff2 0 4em), repeating-linear-gradient(90deg, #fff1 0 1em, #fff2 0 4em); animation: floor var(--duration) infinite linear;}

@keyframes floor { from { background-position-x: 0, 0, -0.5em; } to { background-position-x: 0, 0, -20.5em; }}

.shadow { position: absolute;}
.shadow  i { position: absolute; border-radius: 25%; inset: calc(-0.2em - 1em * var(--i)); animation-name: shadowTranslate, shadowOpacity; animation-duration: var(--duration); animation-delay: calc(var(--i) * var(--duration) * 0.05 - var(--duration) * 1.5); animation-iteration-count: infinite;  animation-timing-function: linear; box-shadow: 0 0 0.8em 0.8em #000, 0 0 0.8em 0.8em #000 inset; }


@keyframes shadowTranslate { from { translate: calc(-1em * var(--i) + 10em); } to { translate: calc(-1em * var(--i) - 10em); }}
@keyframes shadowOpacity { 0%, 25%, 75%, 100% { opacity: 0; } 50% { opacity: 1; }}

.squares { position: absolute;}  
.squares i { position: absolute; border-radius: 15%; inset: calc(-1em - 1em * var(--i)); border: 0.8em solid hsl( 10 calc(var(--i) * 40 + 50) 75%); transform-origin: calc(50% + 10em) 50%; animation-name: iRotate, iTranslate; animation-duration: var(--duration); animation-delay: calc(var(--i) * var(--duration) * 0.05 - var(--duration)); animation-iteration-count: infinite; animation-timing-function:...