示例

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.textfor val in textdiv #{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);}}
}

2000 Followers-3D CSS text相关推荐

CSS Text Decoration
大家很熟悉的 CSS2 用法 text-decoration ,到了 CSS3 就拥有很多新的特性.本文将介绍 Level 4 中最新添加的特性. CSS Text Decoration 文字修饰线: ...
3d元素周期表text（1）
先上代码 html: <!DOCTYPE html> <html><head><meta charset="utf-8"><m ...
CSS.text不被选中
1. text{-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
CSS基础学习--6 CSS Text（文本）
一.文本颜色 color:red; 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...
html css text align,css – text-indent不起作用,而text-align：right
看起来保持对齐对于浏览器来说更重要,所以文本的正确边缘保持在右边,无论如何. 该文档设置为ltr方向,因此缩进应用于该行的左侧,但由于您已经表示要将其与右对齐,所以浏览器完全忽略该缩进.我没有解释为什 ...
css text 大小统一样式,css-iPhone上的字体大小呈现不一致
Mobile Safari会尝试调整内容,以便默认情况下可以在屏幕上读取它-与其他浏览器具有不同的默认样式. 我不知道确切的规则-但是当涉及到字体大小时,它看起来像这样工作: 段落,列表项或其他&qu ...
CSS Text文本
文本颜色 color属性用来设置文字的颜色.颜色值有三种表示方法:十六进制值,RGB值,名称. <style>.p1{color: #ff0000;}.p2{color: rgb(0,25 ...
CSS Text Style || CSS文本样式
文本属性属性名用途&值 text-indent 定义文本中首行的缩进. text-overflow 定义文本的溢出部分是否使用省略标记. overflow 规定当内容溢出元素框时发生的事情 ...

2000 Followers-3D CSS text

2000 Followers-3D CSS text

示例

HTML

CSS

2000 Followers-3D CSS text相关推荐

最新文章

热门文章