SOURCE

console 命令行工具 X clear

                    
>
console
.surface
  - 72.times do
    .strip
@import "compass/css3";

$n-strips: 72;
$h-strip: 16em;
$w-strip: .25em;
$t: 9s;

$amplit: $h-strip/4;
$w-surface: $n-strips*$w-strip;
$img: url(https://images.unsplash.com/photo-1588925747931-fcd9e211b629?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 0/ #{$w-surface};

$base-angle: 360deg/$n-strips;
$base-perc: 100%/$n-strips;
$base-t: $t/$n-strips;

@mixin position-strip($i) {
  $curr-angle: $i*$base-angle;
  $y-diff: $amplit*(sin(($i + .5)*$base-angle) - sin(($i - .5)*$base-angle));
  $tan-diff: sqrt(pow($y-diff, 2) + pow($w-strip, 2));

  transform: translateZ($amplit*sin($curr-angle)) 
             rotateY(asin(-$y-diff/$tan-diff))
             scaleX(1.02*$tan-diff/$w-strip);
}

html, body { overflow: hidden; height: 100%; }

body {
  margin: 0;
  perspective: 40em;
  perspective-origin: 50% calc(50% - #{$h-strip});
  background: dimgrey;
}

.surface {
  &, * { transform-style: preserve-3d; }
  &, :before { width: $w-surface; height: $h-strip; }
  &, :before, :after { position: absolute; }
  
  top: 50%; left: 50%;
  margin: -$h-strip/2 (-$w-surface/2);
  transform: rotateX(45deg) rotate(30deg);
  animation: rot 28s linear infinite alternate;
}

.strip {
  float: left;
  overflow: hidden;
  width: $w-strip; height: $h-strip;
  animation: wave $t linear infinite;
  
  @for $i from 0 to $n-strips {
    &:nth-child(#{$i + 1}) {
      @include position-strip($i);
      animation-delay: -$i*$base-t;
      
      &:before { margin-left: -$i*$w-strip; }
    }
  }
  
  &:before {
    background: $img;
    content: '';
  }
}

@keyframes rot { to { transform: rotateX(45deg) rotate(-30deg); } }

@keyframes wave {
  @for $i from 0 through $n-strips {
    #{$i*$base-perc} { @include position-strip($i); }
  }
}

本项目引用的自定义外部资源