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

代码语言：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(var(--angle) - 65deg), rgba(var(--color-hour), 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;
        }
        
        .timecircle.hour {
          --myOffset: 0;
          --myMax: 1414;
          transition: all 1s ease-in-out;
        }
        .timecircle.min {
          --myOffset: 0;
          --color: #00ff00;
          --myMax: 1100;
        }
        .timecircle.sec {
          --myOffset: 0;
          --myMax: 786;
          --color: #83caa8;
          transition: all 0.99s linear;
        }
        
        .date-display {
          grid-area: 2/2/1/1;
          place-self: center;
          text-align: center;
          color: aliceblue;
          padding: 4rem;
          font-size: 36px;
        }
        
        footer {
          text-align: center;
          color: aliceblue;
        }
    </style>




</head>

<body>
    <div class="card">
        <div class="circle-wrap">
            <div class="time-display">
                <div id="time"></div>
            </div>
            <svg viewBox="0 0 320 320" class="sec-svg linearea">
                <circle class="timecircle sec" cx="160" cy="160" r="125" />
            </svg>
            <svg viewBox="0 0 320 320" class="sec-svg dotarea">
                <circle class="dot secdot" cx="0" cy="0" r="12" />
            </svg>

            <svg viewBox="0 0 480 480" class="min-svg linearea">
                <circle class="timecircle min" cx="240" cy="240" r="175" />
            </svg>
            <svg viewBox="0 0 480 480" class="min-svg.........完整代码请登录后点击上方下载按钮下载查看