文字 3D 立体效果

text-3d.scss

@mixin text-3d($color: white, $depth: 5) {
  $shadows: ();
  $shadow-color: $color;

  @for $i from 1 through $depth {
    $shadow-color: darken($shadow-color, 10%);
    $shadows: append($shadows, 0 ($i * 1px) $shadow-color, comma);
  }

  color: $color;
  // 关键，最后添加一个黑色的阴影
  text-shadow: append($shadows, 0  ($depth * 1px) 10px black, comma);
}