bin-bits二进制时钟显示效果代码-html代码-BFW代码库

bin-bits二进制时钟显示效果代码

代码语言：html

所属分类：其他

代码描述：bin-bits二进制时钟显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @property --bc-hms { syntax: "<integer>"; initial-value: 0; inherits: true; }
        @property --bc-clock { syntax: "<integer>"; initial-value: 0; inherits: true; }
        @property --bc-sum { syntax: "<integer>"; initial-value: 0; inherits: true; }
        @property --bc-divint { syntax: "<integer>"; initial-value: 0; inherits: true; }
        @property --bc-MOD { syntax: "<integer>"; initial-value: 0; inherits: true; }
        @property --bc-h { syntax: "<integer>"; initial-value: 0; inherits: true; }
        @property --bc-m { syntax: "<integer>"; initial-value: 0; inherits: true; }
        @property --bc-s { syntax: "<integer>"; initial-value: 0; inherits: true; }
        
        @keyframes clock { to { --bc-clock: calc(var(--bc-mod) - 1); } }
        
        .binary-clock {
          --bc-mod: (60 * 60 * 24);
          --bc-clock: 0;
          --css-seconds-are-useless: 0.65s; /* 1s is much longer than 1 second */
          animation: clock calc(var(--bc-mod) * var(--css-seconds-are-useless)) infinite;
          --bc-sum: calc(var(--bc-hms) + var(--bc-clock));
          --bc-divint: calc(var(--bc-sum) / var(--bc-mod) - 0.5);
          --bc-MOD: calc(var(--bc-sum) - (var(--bc-divint) * var(--bc-mod)));
          --bc-h: calc(var(--bc-MOD) / 60 / 60 - 0.5);
          --bc-m: calc((var(--bc-MOD) - var(--bc-h) * 60 * 60 + 0.5) / 60 - 0.5);
          --bc-s: calc(var(--bc-MOD) - var(--bc-h) * 60 * 60 - var(--bc-m) * 60);
          display: flex;
          flex-direction: column;
          width: 50vw;
          margin: auto;
        }
        
        .binary-clock__bits--h { --bin-a-round: var(--bc-h); --bc-hue: 344deg; }
        .binary-clock__bits--m { --bin-a-round: var(--bc-m); --bc-hue: 196deg; }
        .binary-clock__bits--s { --bin-a-round: var(--bc-s); --bc-hue: 120deg; }
        .binary-clock__bits {
          aspect-ratio: 6 / 1;
          --bc-hsl: var(--bc-hue) 80% 60%;
          --bc-on: radial-gradient(hsl(var(--bc-hue) 50% 80%), hsl(var(--bc-hsl)) 30%, black 55%);
          --bc-off: radial-gradient(hsl(var(--bc-hsl) / 0.33) 35%, black 45%);
          --bc-off-bg: var(--bc.........完整代码请登录后点击上方下载按钮下载查看