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