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

js+svg实现立体钟摆时钟显示时间代码

代码语言：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%;
    heigh.........完整代码请登录后点击上方下载按钮下载查看