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: #040909;
    width: 90%;
    height: 70%;
    border-radius: 50%;
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
    box-shadow: 
    inset -0.4em 0em 1em -0.3em 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-right {
    position: absolute;
    bottom: 12%;
    right: -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-right::before {
    display: block;
    content: '';
    position: absolute;
    top: -24%;
    left: 0;
    right: 0;
    margin: auto;
    background: #040909;
    width: 90%;
    height: 70%;
    border-radius: 50%;
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
    box-shadow: 
    inset -0.4em 0em 1em -0.3em 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)
    /* -------- */;
}

.small-outer-pipe {
    position: absolute;
    translate: 0 -5.6%;
    width: calc(var(--_size) * (1/2.7));
    height: calc( var(--_size) * 0.87);
    border-radius: 40% / 10%;
    
    overflow: hidden;
    opacity: 1;
    --_clip-btm: 96%;
    clip-path: polygon(0 0, 100% 0, 100% var(--_clip-btm), 0 var(--_clip-btm));
    border-top: 0.3em solid var(--mw1);
}
.small-inner-pipe {
    width: 100%;
    height: 100%;
    scale: 0.92 0.98;
    border-radius: 35% / 10%;
    box-shadow: 
    0em -94em 20em 20em #040909,
    0em 104em 20em 20em #040909,
    /* light on */
    0em 1em 1em 0.2em var(--m3),
    0em 1em 1em 0.5em var(--m2),
    0em 1em 0.5em 1.2em var(--m1),
    0em 1em 1.2em 1.5em var(--m2),
    0em 1em 2em 2em var(--m3),
    /* ---- */
    /* nat light */
    -0.2em 0.5em 0.8em -0.2em var(--mw1),
    0em 90em 16em 20em #040909,
    -1em 1em 2em 2em #040909,
    0.5em 0em 2em 2em #040909,
    0em 0em 0em 4.6em var(--mw1),
    0em 0em 1.5em 5em var(--mw1),
    /* --------- */
    0em 0em 0em 20em #040909;
}

.base-container{
    position: absolute;
    width: calc(var(--_size) * (8/15));
    height: var(--_size);
    
}
.base-container .base{
    width: 100%;
    height: 100%;
    position: absolute;
}
.base-container .base div{
    background: #040909;
    position: absolute;
    bottom: 4%;
    left: -10%;
    width: 120%;
    height: 12%;
    border-radius: 40% 40% / 30% 30%;    
    box-shadow: 
    0 2em 2em -1.4em #000,
    inset -0.4em 0.1em 0.8em -0.2em var(--mw1);
}
.base-container .base div::before {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    border-radius: 100%;    
    box-shadow: 
    0 2em 10em 0 #000,
    inset -0.4em 0em 0.8em 0em var(--mw1),
    inset 0em 0em 0.5em 0.3em #040909,
    inset 0em 0em 0.5em 0.3em #040909,
    inset 0em 0em 1em 0em #040909,
    inset 0em 0em 2em 0em #040909,
    inset 0em 0em 3em 0em #040909,
    /* light on */
    inset 0em 0em 1em 0em var(--m3),
    inset 0em 0em 1em 2em var(--m2),
    inset 1em 0.3em 10em 10em var(--m1)
    /* -------- */;
}
.display {
    color: var(--_bloom);
    font-size: 14em;
    line-height: 0.8em;
    translate: 0 -0.4em;
}
.display .row {
    display: flex;
}
.display .small-row {
    font-size: 0.3em;
    position: absolute;
    right: -22%;
    top: 10%;
}
.display .small-row .row {
    flex-direction: column;
    line-height: 1.02em;
}
.display .row .col {
    display: flex;
    position: relative;
}
.display .row .col > div:nth-child(1){
    opacity: 0.2;
}
.display .row .col > div:nth-child(2){
    position: absolute;
    right: 0;
    z-index: 2;
}
.display .row .col > div:nth-child(3){
    position: absolute;
    right: 0;
    color: var(--_bloom);
    --_o1-size: 0.1em;
    --_o2-size: 0.4em;
    --_o3-size: 0.6em;
    text-shadow: 
    0em 0em 0.04em var(--_bloom),
    0em 0em 0.04em var(--_bloom),
    0em 0em var(--_o3-size) var(--_o3),
    0em 0em var(--_o3-size) var(--_o3),
    0em 0em var(--_o3-size) var(--_o3),
    0em 0em var(--_o3-size) var(--_o3),
    0em 0em var(--_o2-size) var(--_o2),
    0em 0em var(--_o2-size) var(--_o2),
    0em 0em var(--_o2-size) var(--_o2),
    0em 0em var(--_o2-size) var(--_o2),
    0em 0em var(--_o1-size) var(--_o1),
    0em 0em var(--_o1-size) var(--_o1),
    0em 0em var(--_o1-size) var(--_o1),
    0em 0em var(--_o1-size) var(--_o1);
}
.glass-tube {
    position: absolute;
    width: 26em;
    height: 70em;
    translate: 0 -7em;
    border-radius: 1000px;
    box-shadow: 
    /* light on */
    0em 0em 1em -0.2em var(--m1),
    0em 0em 2em -0.4em var(--m2),
    0em 0em 3em -0.4em var(--m2),
    inset 0em 0em 0.4em 0.2em var(--m3),
    inset 0em 0em 0.6em 0.4em var(--m2),
    inset 0em 0em 1em 0.7em var(--m1),
    inset 0em 0em 3em 0em var(--m2),
    inset 0em 0em 5em 1em var(--m3),
    /* -------- */
    inset -0.1em 0.1em 0.1em 0em var(--mw1),
    inset 0 0 1em 0.1em var(--mw1);
}
.glass-tube::before {
    content: "";
    display: block;
    width: 6%;
    opacity: 0.9;
    height: 60%;
    box-shadow: 
    inset 1.5em 0em 1em -1em var(--mw1);
    position: absolute;
    left: 4%;
    top: 16%;
    filter: blur(0.6px);
    opacity: 0.8;
    border-radius: 50% 1% / 50% 100%;
}
.glass-tube::after {
    content: "";
    display: block;
    width: 30%;
    opacity: 0.9;
    height: 60%;
    box-shadow: 
    inset -1em 0.5em 1em -1em var(--mw1);
    position: absolute;
    right: 4%;
    top: 4%;
    filter: blur(0.6px);
    opacity: 1;
    border-radius: 0% 100% / 10% 30%;
}
.hex {
    position: absolute;
    width: 17.7em;
    height: 70em;
    translate: 0 -7em;
    border-radius: 1000px;
    overflow: hidden;
    z-index: -1;
    opacity: 0.7;
    --_hex-cl1: #040909;
    --_hex-cl2: var(--_o1);
    --_hex-size: 2.18em;
    background:
    radial-gradient(circle farthest-side at 0% 50%, var(--_hex-cl1) 23.5%,rgba(240,166,17,0) 0) calc(1.06*var(--_hex-size)) calc(1.5*var(--_hex-size)),
    radial-gradient(circle farthest-side at 0% 50%, var(--_hex-cl2) 24%,rgba(240,166,17,0) 0) calc(0.94*var(--_hex-size)) calc(1.5*var(--_hex-size)),
    linear-gradient( var(--_hex-cl1) 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%, var(--_hex-cl1) 0)0 0,
    linear-gradient(150deg, var(--_hex-cl1) 24%, var(--_hex-cl2) 0, var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%, var(--_hex-cl2) 0, var(--_hex-cl2) 76%, var(--_hex-cl1) 0)0 0,
    linear-gradient(30deg, var(--_hex-cl1) 24%, var(--_hex-cl2) 0, var(--_hex-cl2) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%, var(--_hex-cl2) 0, var(--_hex-cl2) 76%, var(--_hex-cl1) 0)0 0,
    linear-gradient(90deg, var(--_hex-cl2) 2%, var(--_hex-cl1) 0, var(--_hex-cl1) 98%.........完整代码请登录后点击上方下载按钮下载查看