js+svg实现立体钟摆时钟显示时间代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：js+svg实现立体钟摆时钟显示时间代码，钟摆可用鼠标点击拖动改变时间，周围的环境也会跟随时间而改变。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
<style>
@import url('https://fonts.cdnfonts.com/css/digital-7-mono');
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; overflow: hidden;}

html {
    filter: grayscale(1) brightness(0.5) contrast(4) brightness(1.6);
}
body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;

    --clr-d: #c2d1e3;  /* midday */
    --clr-n: #35373a; /* midnight */
    --clr: var(--clr-d);
    --clr-dark: lch(from var(--clr) calc(l - 16) c h);

    background: var(--clr);
    background: linear-gradient(225deg, var(--clr), var(--clr-dark));

    font-size: calc(var(--_size) * 0.02);
    --_factor: min(600px, 100vh);
    --_size: min(var(--_factor), 100vw);

    --rotate-hour: 0;
    --pecentage-of-day: 0;
}
svg {
    height: 0; width: 0;
    overflow: hidden;
    max-width: 0px;
    max-height: 0;
}
.nueclock-wrap {
    width: 50em; height: 50em;
    border-radius: 50%;
    position: relative;
    --fox: calc( sin( ( var(--rotate-hour) + 135 ) * 1deg ) );
    --foy: calc( sin( ( var(--rotate-hour) + 45 )* 1deg ) );
    --sox: 1; --soy: 1;
    rotate: 90deg;
}
#timeContainer {
    font-family: 'Digital-7 Mono', sans-serif;
    font-size: 4.2em;
    font-weight: 1000;
    filter: blur(3px);
    opacity: 0.3;
    transition: opacity 0s; 
    text-align: center;
    position: absolute;
    
    color: #fff;
    top: 32%;
    transition: all 0.2s ease-in-out;
}
body:has( .hour.dragging ) #timeContainer {
    opacity: 0;
}
.scene * { pointer-events: none; }
.scene:hover #timeContainer {
    opacity: 0.6;
    filter: blur(1px);
}

.nueclock-wrap * { transition: transform 0.2s ease-out; }
.nueclock-wrap > * { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.hour {
    width: 90%;
    height: 3%;
    transform-origin: 50% 50%;
    clip-path: polygon(-10% -400%, 50% -400%, 50% 400%, -10% 400%);
    transform: rotate(calc( 1deg * var(--rotate-hour)));    
    filter: grayscale(0.2) contrast(1.6);
    --sox: 0.5; --soy: 0.5;
    transition: width 0.2s ease-out;
}
.hour.hovered {
    width: 88%;
}

.hour, .hour::before {
    background: var(--clr-dark);
    box-shadow: 
    calc(0.4em * var(--soy) * var(--foy)) calc(0.4em * var(--sox) * var(--fox)) 0.2em -0.2em #000,
    calc(1em * var(--soy) * var(--foy)) calc(1em * var(--sox) * var(--fox)) 0.8em -0.2em #0005,
    inset calc(-0.4em * var(--soy) * var(--foy)) calc(-1em * var(--sox) * var(--fox)) 1em -0.6em #232323,
    inset calc(0.4em * var(--soy) * var(--foy)) calc(0.6em * var(--sox) * var(--fox)) 0.6em -0.5em #000a,
    inset calc(0.8em * var(--soy) * var(--foy)) calc(2em * var(--sox) * var(--fox)) 1em -0.6em #eee,
    inset calc(0.8em * var(--soy) * var(--foy)) calc(2em * var(--sox) * var(--fox)) 1em -0.1em #eee,
    inset calc(-0.8em * var(--soy) * var(--foy)) calc(-2em * var(--sox) * var(--fox)) 2em -0.1em #232323;
}

.hour::before {
    content: ''; display: block;
    width: 11%; 
    height: 400%;
    position: absolute;
    bottom: -150%;
    left: -2%;
    border-radius: 1.2em;
    --sox: 1;
    --soy: 1;
    cursor: grab;
}
.hour.dragging::before {
    cursor: grabbing;
}
.hour::after {
    content: ''; display: block;
    width: 1.2%; height: 200%;
    position: absolute;
    left: 8.8%; top: -50%;
    background: var(--clr-dark);
    font-size: 0.6em;
    box-shadow: 
    inset calc((2em * var(--foy)) + 1em) 0 1em -2em #000c,
    inset calc(-0.4em * var(--soy) * var(--foy)) calc(-1em * var(--sox) * var(--fox)) 1em -0.6em #232323,
    inset calc(0.4em * var(--soy) * var(--foy)) calc(0.6em * var(--sox) * var(--fox)) 0.6em -0.5em #000a,
    inset calc(0.8em * var(--soy) * var(--foy)) calc(2em * var(--sox) * var(--fox)) 1em -0.6em #eee,
    inset calc(0.8em * var(--soy) * var(--foy)) calc(2em * var(--sox) * var(--fox)) 1em -0.1em #eee,
    inset calc(-0.8em * var(--soy) * var(--foy)) calc(-2em * var(--sox) * var(--fox)) 2em -0.1em #232323;
}
.shimmer {
    position: absolute; left: 0; top: 0; z-index: 3;
    transform: translate(0, 0); transition: transform 2s ease, opacity 2s ease, scale 2s ease;
    animation: positionShimmer 1s linear infinite; animation-delay: calc((var(--rotate-hour) / 360) * -1s); animation-play-state: paused;
    opacity: 0.8;
    pointer-events: none;
}
@keyframes positionShimmer {
    0%    { opacity: 1;   transform: translate(-4.2em, -1.6em);  /* top right corner */ }
    12.5% { opacity: 1;   transform: translate(-4.8em, 0.5em);   /* top middle */ }
    25%   { opacity: 1;   transform: translate(-4.2em, 3.6em);   /* top left corner */ }
    37.5% { opacity: 1;   transform: translate(-2.2em, 3.7em);   /* left middle */ }
    50%   { opacity: 0.6; transform: translate(-0.4em, 3.3em);   /* bottom left corner */ }
    62.5% { opacity: 0.2; transform: translate(-0.2em, 0.8em);   /* bottom middle */ }
    75%   { opacity: 0.6; transform: translate(-0.4em, -1.6em);  /* bottom right corner */ }
    87.5% { opacity: 1;   transform: translate(-2.2em, -2em);    /* right middle */ }
    100%  { opacity: 1;   transform: translate(-4.2em, -1.6em);  /* back to top right corner */ }
}
.shimmer > div, .shimmer > div::before {
    --shimmer-size: 4em;
    position:absolute; left:0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 100; 
    width: var(--shimmer-size); height: var(--shimmer-size);
}
.shimmer > div {
    --ani-speed: 12s; aspect-ratio: 1;
    width: calc( 2 * var(--shimmer-size));
    animation: flicker-spin var(--ani-speed) linear infinite;
}
.shimmer > div + div { animation-delay: calc( -1 * var(--ani-speed) / 3); }
.shimmer > div + div + div { animation-delay: calc( -2 * var(--ani-speed) / 3); }
.shimmer > div::before {
    content:''; display: block; width: 1em; height: 1em;
    background: #fff; filter: blur(4px);
    animation: flicker-spin calc(var(--ani-speed)/2) linear reverse infinite;
}
@keyframes flicker-spin {
    0% { border-image: radial-gradient(#fff 69%,#0000 70%) 2%/45%; rotate:0deg; }
    50% { border-image: radial-gradient(#fff 69%,#0000 70%) 0%/42%; }
    100% { border-image: radial-gradient(#fff 69%,#0000 70%) 2%/45%; rotate:360deg; }
}

.outer-ring {
    width: 63%; height: 63%; 
    border-radius: 100%;
    box-shadow: 
    -0.4em -0.4em 0.8em -0.8em #fff,
    1.4em 1.4em 1.4em 0.2em #0005,
    0.2em 0.2em 0.3em -0.1em #0005,
    inset 1.2em 1.2em 0.8em -1.2em #fff,
    inset -0.6em -0.6em 0.8em -0.2em #0005,
    inset 0em 0em 1em -0.2em #000a;
    background: #fff1;
}
.inner-outer-ring {
    width: 51%; height: 51%; 
    border-radius: 100%;
    box-shadow: 
    -0.1em -0.1em 0.2em -0.1em #000,
    inset -0.1em -0.1em 0.4em -0.1em #fff,
    inset 1em 1em 4em -1em #000;
}
.mid-ring {
    width: 46%; height: 46%; 
    border-radius: 100%;
    background: var(--clr);
    box-shadow: 
    1em 1em 1.2em -0.6em #fff5,
    -0.3em -0.3em 0.4em -0.6em #0005,
    -0.2em -0.2em 1em 0em #0004,
    inset -0.3em -0.3em 0.6em -0.2em #fff3,
    inset -1.2em -1.2em 1.2em -1.4em #fff3,
    inset 0.1em 0.1em 0.2em -0.1em #0003,
    inset 1em 1em 2em 0em #0007;
}
.mid-ring::before {
    content: ''; display: block;
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 100%; 
    background: repeating-conic-gradient(
        var(--clr) 0%,
        var(--clr) calc((100%)*( 1 / 12)),
        #0001 calc((100%)*( 1 / 12)),
        #0001 calc((100%)*( 2 / 12))
    );
    mix-blend-mode: multiply;
    opacity: 0.5;
}

.outer-inner-ring {
    background: var(--clr);
    width: 36%; height: 36%;
    border-radius: 100%;
    box-shadow: 
    -1em -1em 3em -1em #fff3,
    1em 1em 3em -1em #000a,
    0.2em 0.2em 0.3em -0.1em #0001,
    0.2em 0.2em 2em -1em #000,
    inset 0.4em 0.4em 1em -0.2em #fffa,
    inset 1em 1em 1.6em -0.5em #fff2,
    inset 0em 0em 1em 0.6em #0005
    ;
}
.inner-inner-ring {
    background: var(--clr);
    width: 24%; height: 24%;
    border-radius: 100%;
    box-shadow: 
    inset 0em 0em 0.6em -0.1em #fff4,
    inset -2em -2em 2em -2em #fff2,
    inset 2em 2em 2em -2em #0002,
    -0.1em -0.1em 1em 0em #fffa,
    -1em -1em 3em 1em #fff4,
    0.1em 0.1em 1em 0em #000a,
    1em 1em 3em 1em #0004;
}

.minihud, .minhud * {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
}
.minihud {
    width: 12em; height: 12em;
    border-radius: 100%;
}
.minihud{
    background: linear-gradient(-45deg, #111 0%, #444 100%);
    filter: blur(0.1px);
    box-shadow: inset 1em 1em 3em 0em #0a0a0a;
}
.minihud *:not(.metal-ring) {
    transition: opacity 3s ease-in-out;
}
.metal-ring {
    width: 100%; height: 100%;
    border-radius: 100%;
    box-shadow: 
    -0.2em -0.2em 0.3em 0em #fff7,
    0.1em 0.1em 0.3em 0em #000a,
    0em 0em 0em 0.04em #2c2c2c,
    inset 0em 0em 0.1em 0.02em #0007,
    inset 0.1em 0.1em 0.1em 0em #fffc,
    inset -0.1em -0.1em 0.1em 0em #0005,
    inset 0 0 0.1em 0.3em #777,
    inset 0.2em 0.2em 0.4em 0.2em #0005,
    inset -0.2em -0.2em 0.1em 0.1em #fffa,
    inset 0 0 0 0.4em #777;
    rotate: 90deg;
    filter: contrast(1.4) blur(0.1px);
}
.minihud .scene {
    width: 94%; height: 94%;
    border-radius: 10em;
    overflow: hidden;
}
.minihud .scene,
.minihud .scene *{
    position: absolute; margin: auto;
    top: 0; bottom: 0; left: 0; right: 0;
}

.minihud .scene .sky {
    width: 100%;
    height: 100%;
    bottom: unset;
    
    transition: --clr1 1s, --clr2 1s, --clr3 1s, --clr4 1s;
    background: linear-gradient(170deg, var(--clr1), var(--clr2), var(--clr3), var(--clr4));
    animation: daynight 1s linear infinite alternate;
    animation-play-state: paused;
    animation-delay: calc(( var(--percentage-of-day) ) * -1s);
}
@property --clr1 { syntax: '<color>'; inherits: false; initial-value: #fff; }
@property --clr2 { syntax: '<color>'; inherits: false; initial-value: #fff; }
@property --clr3 { syntax: '<color>'; inherits: false; initial-value: #fff; }
@property --clr4 { syntax: '<color>'; inherits: false; initial-value: #fff; }
@keyframes daynight {
    0%  { --clr1:#0.........完整代码请登录后点击上方下载按钮下载查看