js+css布局模拟中性时钟效果代码

代码语言:html

所属分类:布局界面

代码描述:js+css布局模拟中性时钟走动实时显示时间效果代码

代码标签: css 时钟 中性 时间

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">



    <style>
        * {
          border: 0;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        :root {
          --bg: linear-gradient(#e3e4e8, #abafba);
          --fg: #17181c;
          --primary1: #255ff4;
          --primary2: #5583f6;
          font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
        }
        
        body {
          background: var(--bg);
          color: var(--fg);
          font: 1em/1.5 sans-serif;
          height: 100vh;
          min-height: 480px;
          display: grid;
          place-items: center;
        }
        
        .clock {
          box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.1) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.2), 0 1em 1em rgba(0, 0, 0, 0.3);
          position: relative;
          width: 16em;
          height: 16em;
        }
        .clock, .clock:before, .clock:after {
          border-radius: 50%;
        }
        .clock:before, .clock:after, .clock__hand {
          position: absolute;
        }
        .clock:before, .clock:after {
          content: "";
          display: block;
        }
        .clock:before {
          box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.1);
          top: 2.5em;
          left: 2.5em;
          width: 11em;
          height: 11em;
        }
        .clock:after {
          box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.3) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
          top: calc(50% - 0.5em);
          left: calc(50% - 0.5em);
          width: 1em;
          height: 1em;
        }
        .clock__hand {
          box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 1em 0.5em rgba(0, 0, 0, 0.3);
          bottom: 50%;
          transform-origin: 50% 100%;
          transform: rotate(0) translateY(-1.25em);
        }
        .clock__hand--hr {
          animation: shortHand 86400s linear infinite;
          background: var(--primary1);
          border-radius: 0.5em;
          left: calc(50% - 0.5em);
          width: 1em;
          height: 3.2em;
        }
        .clock__hand--min {
          animation: longHand 3600s linear infinite;
          background: var(--primary2);
          border-radius: 0.4em;
          left: calc(50% - 0.4em);
          width: 0.8em;
          height: 3.6em;
        }
        .clock__hand--sec {
          animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite;
          background: var(--fg);
          border-radius: 0.3em;
          left: calc(50% - 0.3em);
          width: 0.6em;
          height: 4em;
        }
        
        /* Dark theme */
        @media (prefers-color-scheme: dark) {
          :root {
            --bg: linear-gradient(#5c6270, #2e3138);
            --fg: #e3e4e8;
          }
        
          .clock {
            box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.05) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.05), 0 1em 1em rgba(0, 0, 0, 0.4);
          }
          .clock:before {
            box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.2) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.2);
          }
          .clock:after {
            box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.7);
          }
        }
        /* Animations */
        @keyframes shortHand {
          0% {
            box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(0deg) translateY(-1.25em);
          }
          0.83% {
            box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(6deg) translateY(-1.25em);
          }
          1.67% {
            box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(12deg) translateY(-1.25em);
          }
          2.5% {
            box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(18deg) translateY(-1.25em);
          }
          3.33% {
            box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(24deg) translateY(-1.25em);
          }
          4.17% {
            box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(30deg) translateY(-1.25em);
          }
          5% {
            box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(36deg) translateY(-1.25em);
          }
          5.83% {
            box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(42deg) translateY(-1.25em);
          }
          6.67% {
            box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(48deg) translateY(-1.25em);
          }
          7.5% {
            box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(54deg) translateY(-1.25em);
          }
          8.33% {
            box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(60deg) translateY(-1.25em);
          }
          9.17% {
            box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(66deg) translateY(-1.25em);
          }
          10% {
            box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(72deg) translateY(-1.25em);
          }
          10.83% {
            box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(78deg) translateY(-1.25em);
          }
          11.67% {
            box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(84deg) translateY(-1.25em);
          }
          12.5% {
            box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(90deg) translateY(-1.25em);
          }
          13.33% {
            box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(96deg) translateY(-1.25em);
          }
          14.17% {
            box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(102deg) translateY(-1.25em);
          }
          15% {
            box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
            transform: rotate(108deg) translateY(-1.25em);
          }
          15.83% {
           .........完整代码请登录后点击上方下载按钮下载查看

网友评论0