CSS3 斐波那契序列

Fibonacci in CSS | powered by calc and css variables

CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2640
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    --n1: 0;
    --n2: 1;
    --n: var(--n1);
    --x-n: var(--n);
    --x-n1: var(--n1);
    --x-n2: var(--n2);
}
.fib {
    --n: var(--x-n);
    --n1: var(--x-n1);
    --n2: var(--x-n2);
}
.fib > span {
    --x-n1: var(--n2);
    --x-n2: var(--n);
    --x-n: calc(var(--x-n1) + var(--x-n2));
}
/************
 * THEME    *
 ***********/

html {
    font-size: 10px;
}
body {
    background: black;
    color: #fff;
    font-family: sans-serif;
    overflow: hidden;
    margin: 1em 1em 0;
    font-size: 1.6em;
}
h1,
h2 {
    font-weight: lighter;
}
/***************
 * Sequence    *
 **************/

.seq {
    visibility: hidden;
    position: relative;
    counter-reset: n -1;
    font-family: monospace;
    font-size: .8em;
}
.seq .fib {
    display: inline-flex;
    counter-reset: fib;
    counter-increment: fib var(--n) n 1;
}
.seq .fib::before {
    white-space: pre;
    text-align: right;
    content: counter(n) "\a" counter(fib);
    visibility: visible;
}
.seq .fib .fib::before {
    content: ", " counter(n) "\a, " counter(fib);
}
.seq .fib:empty {
    counter-increment: fib 0 n 0;
}
.seq .fib:empty::before {
    content: ';\A;';
}
/*******************
 * Illustration    *
 *******************/

.illu {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    visibility: hidden;
}
.illu .fib {
    position: absolute;
    bottom: 100%;
    left: 100%;
    height: 1em;
    width: 1em;
    transform-origin: 0% 100%;
    transform: rotate(90deg);
    font-size: calc(var(--n) * 1rem);
    color: #000;
    background: hsl(calc(var(--n) * 20), 100%, 40%);
    box-shadow: inset 0 0 0 2px, 0 0 0 2px;
    border-radius: 1em 0 0 0;
    visibility: visible;
}
.illu .fib:empty {
    display: none;
}

HTML

Fibonacci in CSS | powered by calc and css variables

CSS3

编辑器支持Emmet

快捷键

Fibonacci in CSS | powered by calc and css variables

CSS3

CSS3 斐波纳契方块动画演示

CSS3 立方体波动阵列

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：