css+js实现点状指针时钟显示时间效果代码-html代码-BFW代码库

css+js实现点状指针时钟显示时间效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现点状指针时钟显示时间效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --color-sec: 131, 202, 168;
          --color-min: 253, 135, 95;
          --color-hour: 117, 173, 254;
        }
        
        body {
          font-family: "Nova Mono", monospace;
        }
        
        .card {
          background: #0f133c;
          border-radius: 30px;
          width: max-content;
          padding-bottom: 15px;
        }
        
        .circle-wrap {
          position: relative;
          width: 650px;
          height: 650px;
          display: grid;
        }
        
        .time-display {
          grid-area: 1/1/1/1;
          place-self: center;
          text-align: center;
          color: aliceblue;
        }
        .time-display p {
          margin: 0.125rem 0;
        }
        
        #time {
          font-size: 32px;
        }
        
        svg {
          grid-area: 1/1/1/1;
          place-self: center;
        }
        svg.dotarea {
          z-index: 9;
        }
        svg.linearea {
          z-index: -1;
        }
        
        svg .timecircle {
          grid-area: 1/1/1/1;
          fill: none;
          stroke-width: 15px;
          stroke: #041d54;
          transform: rotate(-90deg);
          transform-origin: center;
          stroke-dasharray: var(--myMax);
          transition: all 0.75s linear;
          stroke-dashoffset: var(--myOffset);
          filter: drop-shadow(0px 0px 4px rgba(var(--color), 0.7)) drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.7));
        }
        
        .dot {
          fill: white;
          stroke-width: 2px;
        }
        
        .grad {
          border-radius: 50%;
          grid-area: 1/1/1/1;
          place-self: center;
        }
        
        .sec-svg {
          max-width: 320px;
          max-height: 320px;
        }
        
        .dot.secdot {
          stroke: rgba(var(--color-sec), 1);
          transform: translate(160px, 160px);
          transition: all 0.995s ease-out;
        }
        
        .grad.Sec {
          --angle: 0;
          width: 270px;
          height: 270px;
          mask: radial-gradient(transparent 112px, #000 114px);
          background: conic-gradient(rgba(4, 29, 84, 0.85) calc(var(--angle) - 75deg), rgba(var(--color-sec), 0.65) calc(var(--angle) - 65deg), rgba(var(--color-sec), 1) var(--angle), rgba(4, 29, 84, 0.85) calc(var(--angle) + 0.25deg), rgba(4, 29, 84, 0.85) 360deg);
          transition: all 0.995s forward linear;
        }
        
        .min-svg {
          max-width: 480px;
          max-height: 480px;
        }
        
        .grad.Min {
          --angle: 0;
          width: 370px;
          height: 370px;
          mask: radial-gradient(transparent 165px, #000 167px);
          background: conic-gradient(rgba(4, 29, 84, 0.85) calc(var(--angle) - 75deg), rgba(var(--color-min), 0.65) calc(var(--angle) - 65deg), rgba(var(--color-min), 1) var(--angle), rgba(4, 29, 84, 0.85) calc(var(--angle) + 0.25deg), rgba(4, 29, 84, 0.85) 360deg);
          transition: all 0.995s forward linear;
        }
        
        .dot.mindot {
          stroke: rgba(var(--color-min), 1);
          transform: translate(240px, 240px);
          transition: all 1s ease-out;
        }
        
        .hour-svg {
          max-width: 640px;
          max-height: 640px;
        }
        
        .dot.hourdot {
          stroke: rgba(var(--color-hour), 1);
          transform: translate(320px, 320px);
          transition: all 0.995s ease-out;
        }
        
        .grad.Hour {
          --angle: 0;
          width: 470px;
          height: 470px;
          mask: radial-gradient(transparent 210px, #000 216px);
          background: conic-gradient(rgba(4, 29, 84, 0.85) calc(var(--angle) - 75deg), rgba(var(--color-hour), 0.65) calc(v.........完整代码请登录后点击上方下载按钮下载查看