📝 代码查看
使用runcode.html页面

3
查看次数
2025-11-23
创建时间
2025-11-23
最后更新
<input id='btn' type='checkbox'>
<label class='btn' for='btn'>
  <span class='unchecked'>Play!</span>
  <span class='checked'>Pause!</span>
</label>
<div class='surface'>
  <div class='compressor'>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
    <div class='row'>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
      <div class='point'></div>
    </div>
  </div>
</div>
// these two have to match the number of elements in the DOM
$nx: 16; // number of elements along x axis
$ny: 16; // number of elements along y axis

$nux: 4; // number of units along the x axis
$nuy: 4; // number of units along the y axis

$d: .25em; // dot diam
$u: 5em; // unit size
$p: 5.6; // max height param
$t: 16s; // rotation animation duration
$of: .75; // opacity factor

$dpux: floor($nx/$nux); // density of dots per unit along x axis
$dpuy: floor($ny/$nuy); // density of dots per unit along y axis

$minx: -1*floor($nux/2); // minimum value along x axis
$miny: -1*floor($nuy/2); // minimum value along y axis

// 简化的数学函数，避免复杂计算
@function exp($x) {
  // 简化的指数函数近似
  @return 1 + $x + ($x * $x)/2 + ($x * $x * $x)/6;
}

@function asin($val) {
  // 简化的反正弦函数
  @if $val == 0 {
    @return 0deg;
  }
  $result: $val * 57.2958; // 简单近似：弧度转角度
  @return $result;
}

@function atan($val) {
  // 简化的反正切函数
  @if $val == 0 {
    @return 0deg;
  }
  $result: $val * 45deg; // 简单近似
  @return $result;
}

html, body { height: 100%; }

body {
  overflow: hidden;
  margin: 0;
  perspective-origin: 50% 0;
  perspective: 32em;
  background: black;
}

.surface, .surface *, .surface :before, .surface :after {
  position: absolute;
  top: 50%; right: 50%;
  transform-style: preserve-3d;
}

.row {
  @for $i from 0 to $nx {
    &:nth-child(#{$i + 1}) {
      $x: $minx + $i/$dpux;
      transform: translateZ($x*$u);
      @for $j from 0 to $ny {
        .point:nth-child(#{$j + 1}) {
          $y: $miny + $j/$dpuy;
          
          // 修复：使用简化的数学表达式
          $xx: $x * $x;
          $yy: $y * $y;
          $exponent: -1 * ($xx + $yy);
          $z: $p * $x * exp($exponent);
          
          transform: translate($y*$u, $z*$u);
          
          &:before, &:after {
            background: hsl(($z * 360 / $p + 360) % 360, 100%, 50%);
          }
          
          &:before {
            @if $i > 0 {
              $x0: $minx + ($i - 1)/$dpux;
              $xx0: $x0 * $x0;
              $exponent0: -1 * ($xx0 + $yy);
              $z0: $p * $x0 * exp($exponent0);
              $alpha: atan($dpux * ($z - $z0));
              
              transform: rotateY(-90deg) skewY($alpha) rotateX(90deg);
              background: linear-gradient(90deg, 
                  hsl(($z0 * 360 / $p + 360) % 360, 100%, 50%), 
                  hsl(($z * 360 / $p + 360) % 360, 100%, 50%));
            }
            @else { 
              display: none; 
            }
          }
          
          &:after {
            @if $j > 0 {
              $y0: $miny + ($j - 1)/$dpuy;
              $yy0: $y0 * $y0;
              $exponent0: -1 * ($xx + $yy0);
              $z0: $p * $x * exp($exponent0);
              $alpha: atan($dpuy * ($z - $z0));
              
              transform: skewY($alpha) rotateX(90deg);
              background: linear-gradient(90deg, 
                  hsl(($z0 * 360 / $p + 360) % 360, 100%, 50%), 
                  hsl(($z * 360 / $p + 360) % 360, 100%, 50%));
            }
            @else {
              display: none;
            }
          }
        }
      }
    }
  }
}

.point {
  &:before, &:after {
    margin: -$d/2 0;
    height: $d;
    transform-origin: 100% 50%;
    opacity: $of;
    content: '';
  }
  &:before { 
    width: $u/$dpux; 
  }
  &:after { 
    width: $u/$dpuy; 
  }
}

@keyframes rot { 
  to { 
    transform: rotateY(360deg); 
  } 
}

@keyframes compress { 
  to { 
    transform: scaleY(-1); 
  } 
}

/* "play animation" button styles */
input[type=checkbox] { 
  display: none; 
}

.btn {
  overflow: hidden;
  position: absolute;
  z-index: 10;
  top: 1em; 
  left: 50%;
  border-radius: .5em;
  box-shadow: 0 1px 0 black, 0 -1px 0 #96d1f8;
  margin: 0 -3.25em;
  opacity: .45;
  background: #65a9d7 linear-gradient(#3e779d, #65a9d7);
  color: white;
  font: 700 italic 1em/2.6 Georgia, serif;
  text-shadow: 0 1px 0 black;
  cursor: pointer;
  transition: .7s;
  
  &:hover { 
    opacity: 1; 
  }
}

.btn, .btn span { 
  width: 6.5em; 
  height: 2.6em; 
}

.btn span {
  position: absolute;
  text-align: center;
  transition: .5s;
}

.unchecked { 
  top: 0; 
}

.checked { 
  top: 100%; 
}

input[type=checkbox]:checked ~ .btn .unchecked { 
  top: -100%; 
}

input[type=checkbox]:checked ~ .btn .checked { 
  top: 0; 
}

/* 修复动画中的 random() 问题 */
input[type=checkbox]:checked ~ .surface {
  animation: rot $t linear infinite;
}

input[type=checkbox]:checked ~ .surface .compressor {
  // 使用固定值替代 random()
  animation: compress $t * 0.75 ease-in-out infinite alternate;
}
暂无JavaScript代码

👁️ 实时预览