2000 Followers-3D CSS text

更多有趣示例 盡在小紅磚社區

示例

HTML

- var density = 12 //Be sure to change $depth on line 1 in the CSS - smaller number gives better performance but worse corners
- var text = "2000" //Change to whatever, but it may not fit - change $size on line 2 in the CSS to make it fit
div.text
	for val in text
		div #{val}
			for _ in Array(density)
				div #{val}

CSS

$density:12;
$size: 35vmin;
body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: #323133;
	font-family: "Quicksand", sans-serif;
	font-weight:700;
	perspective: 60rem;
	perspective-origin: 50% 50%;
	overflow: hidden;
	#user-button {
		--user-button-background: #434A54;
		--user-button-text:white;
	}
	.text {
		user-select: none;
		> div {
			display: inline-block;
			position: relative;
			font-size: $size;
			color:transparent;
			transform-origin: center center;
			transform-style: preserve-3d;
			animation: float 4s infinite;
			@for $i from 1 through 4 {
				&:nth-child(#{$i}) {
					animation-delay: (-$i + 4)*-0.5s;
				}
			}
			> div {
				position: absolute;
				top:0;
				left:0;
				color: white;
				text-shadow:0 0 1px white; //Fill in gaps a little
				$thickness:3; //Thickness of ends
				//&:last-child, &:first-child //Just does first and last
				&:not(:nth-child(n+#{$thickness})), &:not(:nth-last-child(n+#{$thickness}))
				{
					color: #ed5565;
					text-shadow:0 0 1px #ed5565;
				}
				@for $i from 1 through $density {
					&:nth-child(#{$i}) {
						transform: translateZ(($i - ($density/2)) * ($size / ($density * 5)));
					}
				}
			}
		}
	}
}

//Modified, original from https://gist.github.com/kamikat/c4d472ce3c61feec6376
$pi: 3.14159265359;
$_precision: 10;

@function pow($base, $exp) {
  $value: $base;
  @if $exp > 1 {
    @for $i from 2 through $exp {
      $value: $value * $base;
    }
  }
  @if $exp < 1{
    @for $i from 0 through -$exp {
      $value: $value / $base;
    }
  }
  @return $value;
}

@function fact($num) {
  $fact: 1;
  @if $num > 0{
    @for $i from 1 through $num {
      $fact: $fact * $i;
    }
  }
  @return $fact;
}

@function sin($a){
  $sin: $a;
  @for $n from 1 through $_precision {
    $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1) ) * pow($a, (2 * $n + 1));
  }
  @return $sin;
}

@function cos($a){
  $cos: 1;
  @for $n from 1 through $_precision {
    $cos: $cos + ( pow(-1,$n) / fact(2*$n) ) * pow($a,2*$n);
  }
  @return $cos;
}

@keyframes float {
	@for $i from 0 through 100 {
		#{$i*1%} {
			transform: rotate3d(sin($i*$pi/50), cos($i*$pi/50), 0, 30deg);
		}
	}
}