div+css实现辉光管(Nixie tube)时钟点亮显示时间代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现辉光管(Nixie tube)时钟点亮显示时间代码，点击下面的圆点开关点亮时钟。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
@import url('https://fonts.cdnfonts.com/css/lcd');
*{
    box-sizing: border-box;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    background: linear-gradient(#040909 60vh, #312c2a 80vh);
    font-family: 'LCD', sans-serif;
    font-family: 'LCD2', sans-serif;
    font-family: 'LCDMono2', sans-serif;
    font-family: 'LCDMono', sans-serif;
    font-family: 'Digitalism', sans-serif;

    --_refl:#f3eeef;

    --_bloom:#fcfbf9;
    --_y1:#fae8a5;
    --_y2:#fbd608;

    --_o1:#ff8f0c;
    --_o2:#e74702;
    --_o3:#b32801;

    --mw1:#d0d5d7;
    
    --m1:#fdea09;
    --m2:#e46703;
    --m3:#ac2a04;
}

#noise-svg {
    height: 100%;
    width: 100%;
    opacity: 0.12;
    position: absolute;
    z-index: 100;
    pointer-events: none;
}
#noise-rect {
    width: 100vw;
    height: 100vh;
}

.clock {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--_size) * 0.01); /* em hack for shade scaling */

    --_factor: min(600px, 80vh);
    --_size: min(var(--_factor), 80vw);
}
.shadow {
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 100%;
    height: 0em;
    translate: 0 45em;
    box-shadow: 
    0 0 3em 2em #040909,
    0 0 8em 3em var(--_o3),
    0 0 10em 4em var(--_o2),
    0 0 10em 5em var(--_o1);
    opacity: 0.6;
}
.shadow::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 20em;
    width: 0;
    box-shadow: 
    0 0 8em 4em var(--_y1),
    0 0 8em 6em var(--_y2),
    0 0 8em 8em var(--_o1),
    0 0 8em 10em var(--_o2),
    0 0 8em 12em var(--_o3);
}
.shadow::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    opacity: 0.5;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    height: 10em;
    width: 10em;
    border: 2px solid red;
    transform: rotateX(70deg);
    box-shadow: 
    0 0em 12em 40em var(--_o1),
    0 0em 12em 60em var(--_o2),
    0 0em 12em 80em var(--_o3);
}
.clock.off .shadow {
    box-shadow: 
    0 0 4em 3em #040909,
    0 0 8em 3em var(--_o3),
    0 0 10em 4em var(--_o2),
    0 0 10em 5em var(--_o1);
    opacity: 0;
}
.outer-pipe {
    position: absolute;
    z-index: 2;
    width: calc(var(--_size) * (8/15));
    height: var(--_size);
    border-radius: 20% / 10%;
    overflow: hidden;
    opacity: 1;
    --_clip-btm: 85.8%;
    clip-path: polygon(0 0, 100% 0, 100% var(--_clip-btm), 0 var(--_clip-btm));
}
.inner-pipe {
    width: 100%;
    height: 100%;
    scale: 0.84 0.91;
    border-radius: 15% / 7%;
    box-shadow: 
    0em 104em 16em 20em #040909,
    /* light on */
    0em 1.2em 1em 0.2em var(--m3),
    0em 1.2em 1em 0.5em var(--m2),
    0em 1.2em 0.5em 1.2em var(--m1),
    0em 1.2em 1.2em 1.5em var(--m2),
    0em 1.2em 2em 2em var(--m3),
    /* ---- */
    0em 90em 16em 20em #040909,
    /* nat light */
    -1em 1em 2em 3.7em #040909,
    0.5em 0em 2em 3.7em #040909,
    0em 0em 0em 4.6em var(--mw1),
    0em 0em 0.5em 5em var(--mw1),
    /* --------- */
    0em 0em 0em 20em #040909;
}
.pipe-accents {  
    width: calc(var(--_size) * (8/15));
    height: var(--_size);
    position: absolute;
}
.pipe-accents .top-tube,
.pipe-accents .top,
.pipe-accents .topinset,
.pipe-accents .left,
.pipe-accents .right {  
    z-index: 3;
}
.pipe-accents .top-tube {
    position: absolute;
    top: 3%;
    left: 0;
    right: 0;
    margin: auto;
    width: 16%;
    height: 6%;
    background: #040909;
    background: linear-gradient(120deg, rgba(60,62,62,1) 0%, rgba(4,9,0,1) 60%);
    box-shadow: 
    inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */
    ;
    border-radius: 20%;
}
.pipe-accents .tube-holders {
    position: absolute;
    width: 26em;
    height: 70em;
    translate: 0 -7em;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}
.pipe-accents .tube-holders div{
    position: absolute;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    --_metal-1: #30241d;
    --_metal-2: #000000;
    --_metal-3: #5f5f5f;
    --_vl: -8%;
    background: conic-gradient(from 0deg at 50% 50%, 
    var(--_metal-1) 0%, 
    var(--_metal-2) 7%, 
    var(--_metal-1) 21%, 
    var(--_metal-2) 35%, 
    var(--_metal-2) 42%, 
    var(--_metal-3) 56%, 
    var(--_metal-1) 63%, 
    var(--_metal-1) 70%, 
    var(--_metal-2) 77%, 
    var(--_metal-3) 84%, 
    var(--_metal-2) 91%, 
    var(--_metal-1) 100%);
    box-shadow: 
    inset 0 0 0.1em 0.1em #ffffff5d,
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */;
}
.pipe-accents .tube-holders div:nth-child(1){ top: 12%; left: var(--_vl); rotate: -65deg;}
.pipe-accents .tube-holders div:nth-child(2){ top: 12%; right: var(--_vl); rotate: 65deg;}
.pipe-accents .tube-holders div:nth-child(3){ top: 26%; left:var(--_vl); rotate: -85deg;}
.pipe-accents .tube-holders div:nth-child(4){ top: 26%; right:var(--_vl); rotate: 85deg;}
.pipe-accents .tube-holders div:nth-child(5){ top: 78.5%; left:var(--_vl); rotate: -115deg;}
.pipe-accents .tube-holders div:nth-child(6){ top: 78.5%; right:var(--_vl); rotate: 115deg;}

.pipe-accents .top {
    position: absolute;
    top: -0.7%;
    left: 0;
    right: 0;
    margin: auto;
    width: 22%;
    height: 6%;
    background: #040909;
    background: linear-gradient(120deg, rgba(60,62,62,1) 0%, rgba(4,9,0,1) 60%);
    box-shadow: 
    inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */
    ;
    border-radius: 20%;
}
.pipe-accents .topinset {
    position: absolute;
    top: -1.7%;
    left: 0;
    right: 0;
    margin: auto;
    width: 14%;
    height: 8%;
    background: #040909;
    background: linear-gradient(120deg, rgba(60,62,62,1) 0%, rgba(4,9,0,1) 60%);
    box-shadow: 
    inset -0.2em 1.1em 1.4em -0.4em var(--mw1),
    /* light on */
    inset 0em -1.2em 0.5em -1.1em var(--m1),
    inset 0em -1.2em 1em -0.8em var(--m2),
    inset 0em -1.2em 1em -0.2em var(--m3)
    /* -------- */
    ;
    border-radius: 50%;
}
.pipe-accents .topinset::before {
    content: '';
    display: block;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
   .........完整代码请登录后点击上方下载按钮下载查看