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;
    bottom: 0;
    margin: auto;
    box-shadow: 
    inset 0 0 0em 0.1em #040909,
    /* light on */
    0 0 0.5em 0.1em var(--_bloom),
    inset 0 0 1.3em 0.2em var(--_o3),
    inset 0 0 1.3em 0.4em var(--_o2),
    inset 0 0 1.3em 0.6em var(--_o1),
    inset 0 0 1.3em 2em var(--_y1)
    /* -------- */;
    animation: 5s flicker linear infinite;
}
@keyframes flicker {
    0% { opacity: 1;}
    10% { opacity: 1;}
    11% { opacity: 0.8;}
    12% { opacity: 1;}
    65% { opacity: 1;}
    66% { opacity: 0.7;}
    67% { opacity: 0.9;}
    68% { opacity: 1;}
    69% { opacity: 0.4;}
    70% { opacity: 1;}
    100% { top: 1;}
}
.pipe-accents .left,
.pipe-accents .right {
    width: 100%;
    height: 100%;
    position: absolute;
}
.pipe-accents .left div,
.pipe-accents .right div{
    --_pipe-pos-x: -3%;
    position: absolute;
    margin: auto;
    width: 14%;
    height: 2.4%;
    border-radius: 0.7em;
    background: #040909;
}
.pipe-accents .left div:nth-child(1){
    top: 16%;
    left: var(--_pipe-pos-x);
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset -1em -0.5em 0.8em -0.8em var(--m3),
    inset -1em -0.5em 0.9em -0.5em var(--m2),
    inset -1em -0.5em 1em -0.3em var(--m1);
    /* -------- */
}
.pipe-accents .left div:nth-child(1)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    left: 78%;
    top: 40%;
    rotate: 5deg;
    bottom: 0;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset 1em -0.5em 0.3em -0.5em var(--m3),
    inset 1em -0.5em 0.4em -0.3em var(--m2),
    inset 1em -0.5em 0.6em -0.2em var(--m1)
    /* -------- */;
}
.pipe-accents .left div:nth-child(2){
    top: 26%;
    left: var(--_pipe-pos-x);
    border-top-right-radius: 30%;
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 30%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset -1em 0em 0.8em -0.6em var(--m3),
    inset -1em 0em 0.9em 0em var(--m2),
    inset -1em 0em 1em 0.1em var(--m1);
    /* -------- */
}
.pipe-accents .left div:nth-child(2)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    left: 78%;
    top: 0%;
    rotate: 2deg;
    bottom: 0;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset 1em -0.1em 0.3em 0em var(--m3),
    inset 1em -0.1em 0.4em 0.2em var(--m2),
    inset 1em -0.1em 0.6em -0.3em var(--m1)
    /* -------- */;
}
.pipe-accents .left div:nth-child(3){
    top: 64%;
    left: var(--_pipe-pos-x);
    border-bottom-right-radius: 40%;
    border-bottom-left-radius: 40%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset -1em 0.3em 0.8em -0.5em var(--m3),
    inset -1em 0.3em 0.9em -0.3em var(--m2),
    inset -1em 0.3em 1em 0em var(--m1);
    /* -------- */
}
.pipe-accents .left div:nth-child(3)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    left: 78%;
    top: 20%;
    rotate: -4deg;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset 1em 0.2em 0.3em -0.1em var(--m3),
    inset 1em 0.2em 0.4em 0em var(--m2),
    inset 1em 0.2em 0.6em 0.1em var(--m1)
    /* -------- */;
}
.pipe-accents .right div:nth-child(1){
    top: 16%;
    right: var(--_pipe-pos-x);
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset 1em -0.5em 0.8em -0.8em var(--m3),
    inset 1em -0.5em 0.9em -0.5em var(--m2),
    inset 1em -0.5em 1em -0.3em var(--m1);
    /* -------- */
}
.pipe-accents .right div:nth-child(1)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    right: 78%;
    top: 40%;
    rotate: -5deg;
    bottom: 0;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset -1em -0.5em 0.3em -0.5em var(--m3),
    inset -1em -0.5em 0.4em -0.3em var(--m2),
    inset -1em -0.5em 0.6em -0.2em var(--m1)
    /* -------- */;
}
.pipe-accents .right div:nth-child(2){
    top: 26%;
    right: var(--_pipe-pos-x);
    border-top-right-radius: 30%;
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
    border-bottom-left-radius: 30%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset 1em 0em 0.8em -0.6em var(--m3),
    inset 1em 0em 0.9em 0em var(--m2),
    inset 1em 0em 1em 0.1em var(--m1);
    /* -------- */
}
.pipe-accents .right div:nth-child(2)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    right: 78%;
    top: 0%;
    rotate: -2deg;
    bottom: 0;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset -1em -0.1em 0.3em 0em var(--m3),
    inset -1em -0.1em 0.4em 0.2em var(--m2),
    inset -1em -0.1em 0.6em -0.3em var(--m1)
    /* -------- */;
}
.pipe-accents .right div:nth-child(3){
    top: 64%;
    right: var(--_pipe-pos-x);
    border-bottom-right-radius: 40%;
    border-bottom-left-radius: 40%;
    box-shadow: 
    inset -0.1em 0.4em 0.6em -0.2em var(--mw1),
    /* light on */
    inset 1em 0.3em 0.8em -0.5em var(--m3),
    inset 1em 0.3em 0.9em -0.3em var(--m2),
    inset 1em 0.3em 1em 0em var(--m1);
    /* -------- */
}
.pipe-accents .right div:nth-child(3)::before {
    content: '';
    display: block;
    width: 98%;
    height: 1em;
    background: #040909;
    position: absolute;
    right: 78%;
    top: 20%;
    rotate: 4deg;
    margin: auto;
    z-index: -1;
    box-shadow: 
    inset 0em 0.3em 0.6em -0.4em var(--mw1),
    /* light on */
    inset -1em 0.2em 0.3em -0.1em var(--m3),
    inset -1em 0.2em 0.4em 0em var(--m2),
    inset -1em 0.2em 0.6em 0.1em var(--m1)
    /* -------- */;
}
.pipe-accents .bottom-left {
    position: absolute;
    bottom: 12%;
    left: -6%;
    width: 20%;
    height: 2.4%;
    background: #040909;
    border-radius: 40%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    box-shadow: 
    inset -0.4em -0.1em 1em -0.4em var(--mw1),
    /* light on */
    inset -2em 0em 1.8em -1.5em var(--m3),
    inset -2em 0em 1.9em -1.3em var(--m2),
    inset -2em 0em 2em -1em var(--m1)
    /* -------- */;
}
.pipe-accents .bottom-left::before {
    display: block;
    content: '';
    position: absolute;
    top: -24%;
    left: 0;
    right: 0;
    margin: auto;
    background: #0.........完整代码请登录后点击上方下载按钮下载查看