纯CSS绘制的鸡蛋在页面上滚动动画

HTML代码：

<div class="scene">
  <div class="egg"></div>
  <div class="shadow"></div>
  <div class="floor"></div>
</div>

CSS代码：

<style>
body {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
  overflow: hidden;
  perspective: 750px;
}

.scene {
  position: relative;
  transform-style: preserve-3d;
}

.egg {
  position: absolute;
  left: -0.5em;
  width: 1em;
  height: 1.5em;
  border-radius: 0.5em/0.5em 0.5em 1em 1em;
  transform-origin: 50% 0.5em;
  overflow: hidden;
  -webkit-animation: eggRotate 3s infinite cubic-bezier(0.5, 0.15, 0.5, 0.85), eggTop 3s infinite;
          animation: eggRotate 3s infinite cubic-bezier(0.5, 0.15, 0.5, 0.85), eggTop 3s infinite;
}
@-webkit-keyframes eggRotate {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes eggRotate {
  to {
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes eggTop {
  0%, 100% {
    top: 0em;
    -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.5, 0.5);
            animation-timing-function: cubic-bezier(0.75, 0, 0.5, 0.5);
  }
  35%, 65% {
    top: 0.5em;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.25, 1);
            animation-timing-function: cubic-bezier(0.5, 0.5, 0.25, 1);
  }
}
@keyframes eggTop {
  0%, 100% {
    top: 0em;
    -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.5, 0.5);
            animation-timing-function: cubic-bezier(0.75, 0, 0.5, 0.5);
  }
  35%, 65% {
    top: 0.5em;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.25, 1);
            animation-timing-function: cubic-bezier(0.5, 0.5, 0.25, 1);
  }
}
.egg::before {
  content: "";
  position: absolute;
  left: calc(50% - 1.5em);
  top: calc(50% - 0.75em);
  width: 3em;
  height: 1.5em;
  background-image: radial-gradient(circle at top, #fff, #000);
  animation: eggRotate 3s infinite cubic-bezier(0.5, 0.15, 0.5, 0.85) reverse;
}
.egg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 0.5em #000a inset;
}

.shadow {
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 2em;
  height: 2em;
  background-image: radial-gradient(#000a, #0000 60%);
  -webkit-animation: shadow 3s infinite ease-in-out;
          animation: shadow 3s infinite ease-in-out;
}
@-webkit-keyframes shadow {
  0%, 100% {
    transform: rotateX(90deg) scaleX(0.75);
  }
  50% {
    transform: rotateX(90deg) scaleX(1);
  }
  35%, 65% {
    transform: rotateX(90deg) scaleX(1.5);
  }
}
@keyframes shadow {
  0%, 100% {
    transform: rotateX(90deg) scaleX(0.75);
  }
  50% {
    transform: rotateX(90deg) scaleX(1);
  }
  35%, 65% {
    transform: rotateX(90deg) scaleX(1.5);
  }
}

.floor {
  position: absolute;
  top: -3.5em;
  left: -5em;
  width: 10em;
  height: 10em;
  background-image: radial-gradient(#0000, #000 5em), repeating-linear-gradient(90deg, #333 0 0.0625em, #3330 0.0625em 0.125em);
  transform: rotateX(90deg) translateZ(-1px);
  -webkit-animation: floorMove 3s infinite cubic-bezier(0.5, 0.15, 0.5, 0.85);
          animation: floorMove 3s infinite cubic-bezier(0.5, 0.15, 0.5, 0.85);
}
@-webkit-keyframes floorMove {
  from {
    background-position-x: 0, 0;
  }
  to {
    background-position-x: 0, -5.125em;
  }
}
@keyframes floorMove {
  from {
    background-position-x: 0, 0;
  }
  to {
    background-position-x: 0, -5.125em;
  }
}
</style>