css+js实现反走逆时针时钟指针动画效果代码

代码语言:html

所属分类:动画

代码描述:css+js实现反走逆时针时钟指针动画效果代码

代码标签: 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: #e3e4e8;
          --fg: #17181c;
          font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
        }
        
        body {
          background: var(--bg);
          color: var(--fg);
          font: 1em/1.5 -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, sans-serif;
          height: 100vh;
          display: grid;
          place-items: center;
        }
        
        main {
          padding: 1.5em 0;
        }
        
        .clock {
          background: radial-gradient(100% 100% at 50% 10%, #737a8c, #17181c 50%);
          border-radius: 50%;
          box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.5);
          position: relative;
          width: 15em;
          height: 15em;
        }
        .clock__inner-frame, .clock__ticks, .clock__tick, .clock__digits, .clock__digit, .clock__text, .clock__hands, .clock__hand, .clock__hand-trail {
          position: absolute;
        }
        .clock__inner-frame, .clock__ticks, .clock__digits, .clock__hands {
          border-radius: inherit;
        }
        .clock__inner-frame {
          background: linear-gradient(#8f95a3, #c7cad1);
          box-shadow: 0 0.1em 0 #cccccc inset;
          top: 1em;
          left: 1em;
          width: 13em;
          height: 13em;
        }
        .clock__ticks {
          background: linear-gradient(#e3e4e8, white);
          box-shadow: 0 0.5em 0.5em 0.75em rgba(0, 0, 0, 0.2) inset, 0 0 0 0.15em #17181c;
          top: 1.5em;
          left: 1.5em;
          width: 12em;
          height: 12em;
        }
        .clock__tick, .clock__hand {
          background: currentColor;
        }
        .clock__tick {
          bottom: 50%;
          left: calc(50% - 0.025em);
          width: 0.05em;
          min-width: 1px;
          height: 0.25em;
          transform-origin: 50% 100%;
        }
        .clock__tick:nth-child(5n+1) {
          left: calc(50% - 0.05em);
          width: 0.1em;
          min-width: 2px;
          height: 0.5em;
        }
        .clock__tick:nth-child(1) {
          transform: rotate(0deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(2) {
          transform: rotate(6deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(3) {
          transform: rotate(12deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(4) {
          transform: rotate(18deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(5) {
          transform: rotate(24deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(6) {
          transform: rotate(30deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(7) {
          transform: rotate(36deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(8) {
          transform: rotate(42deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(9) {
          transform: rotate(48deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(10) {
          transform: rotate(54deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(11) {
          transform: rotate(60deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(12) {
          transform: rotate(66deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(13) {
          transform: rotate(72deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(14) {
          transform: rotate(78deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(15) {
          transform: rotate(84deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(16) {
          transform: rotate(90deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(17) {
          transform: rotate(96deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(18) {
          transform: rotate(102deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(19) {
          transform: rotate(108deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(20) {
          transform: rotate(114deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(21) {
          transform: rotate(120deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(22) {
          transform: rotate(126deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(23) {
          transform: rotate(132deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(24) {
          transform: rotate(138deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(25) {
          transform: rotate(144deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(26) {
          transform: rotate(150deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(27) {
          transform: rotate(156deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(28) {
          transform: rotate(162deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(29) {
          transform: rotate(168deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(30) {
          transform: rotate(174deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(31) {
          transform: rotate(180deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(32) {
          transform: rotate(186deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(33) {
          transform: rotate(192deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(34) {
          transform: rotate(198deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(35) {
          transform: rotate(204deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(36) {
          transform: rotate(210deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(37) {
          transform: rotate(216deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(38) {
          transform: rotate(222deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(39) {
          transform: rotate(228deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(40) {
          transform: rotate(234deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(41) {
          transform: rotate(240deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(42) {
          transform: rotate(246deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(43) {
          transform: rotate(252deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(44) {
          transform: rotate(258deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(45) {
          transform: rotate(264deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(46) {
          transform: rotate(270deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(47) {
          transform: rotate(276deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(48) {
          transform: rotate(282deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(49) {
          transform: rotate(288deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(50) {
          transform: rotate(294deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(51) {
          transform: rotate(300deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(52) {
          transform: rotate(306deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(53) {
          transform: rotate(312deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(54) {
          transform: rotate(318deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(55) {
          transform: rotate(324deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(56) {
          transform: rotate(330deg) translateY(-5.25em);
        }
        .clock__tick:nth-child(57) {
          transform: rotate(336deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(58) {
          transform: rotate(342deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(59) {
          transform: rotate(348deg) translateY(-5.5em);
        }
        .clock__tick:nth-child(60) {
          transform: rotate(354deg) translateY(-5.5em);
        }
        .clock__digits {
          top: 2.5em;
          left: 2.5em;
          width: 10em;
          height: 10em;
        }
        .clock__digit {
          font-size: 1.5em;
          line-height: 1;
          letter-spacing: -0.05em;
          text-align: center;
          top: calc(50% - 0.75rem);
          left: calc(50% - 1.25rem);
          width: 2.5rem;
          height: 1.5rem;
        }
        .clock__digit:nth-child(1) {
          transform: rotate(30deg) translateY(-4.25rem) rotate(-30deg);
        }
        .clock__digit:nth-child(2) {
          transform: rotate(60deg) translateY(-4.25rem) rotate(-60deg);
        }
        .clock__digit:nth-child(3) {
          transform: rotate(90deg) translateY(-4.25rem) rotate(-90deg);
        }
        .clock__digit:nth-child(4) {
          transform: rotate(120deg) translateY(-4.25rem) rotate(-120deg);
        }
        .clock__digit:nth-child(5) {
          transform: rotate(150deg) translateY(-4.25rem) rotate(-150deg);
        }
        .clock__digit:nth-child(6) {
          transform: rotate(180deg) translateY(-4.25rem) rotate(-180deg);
        }
        .clock__digit:nth-child(7) {
          transform: rotate(210deg) translateY(-4.25rem) rotate(-210deg);
        }
        .clock__digit:nth-child(8) {
          transform: rotate(240deg) translateY(-4.25rem) rotate(-240deg);
        }
        .clock__digit:nth-child(9) {
          transform: rotate(270deg) translateY(-4.25rem) rotate(-270deg);
        }
        .clock__digit:nth-child(10) {
          transform: rotate(300deg) translateY(-4.25rem) rotate(-300deg);
        }
        .clock__digit:nth-child(11) {
          transform: rotate(330deg) translateY(-4.25rem) rotate(-330deg);
        }
        .clock__digit:nth-child(12) {
          transform: rotate(360deg) translateY(-4.25rem) rotate(-360deg);
        }
        .clock__text {
          font-size: 0.4em;
          text-align: center;
          text-transform: uppercase;
          top: 65%;
          left: 0;
          width: 100%;
        }
        .clock__hands {
          filter: drop-shadow(0 0.5em 0.1em rgba(0, 0, 0, 0.3));
          top: 2.5em;
          left: 2.5em;
          width: 10em;
          height: 10em;
        }
        .clock__hand--hr {
          animation: hrHand 86400s cubic-bezier(0.8, 0, 0.2, 1) infinite;
          border-radius: 0 0 0.2em 0.2em;
          bottom: calc(50% - 0.2em);
          left: calc(50% - 0.2em);
          width: 0.4em;
          height: 3.25em;
          transform-origin: 50% calc(100% - 0.2em);
        }
        .clock__hand--min {
          animation: longHand 3600s cubic-bezier(0.8, 0, 0.2, 1) infinite;
          border-radius: 0 0 0.15em 0.15em;
          bottom: calc(50% - 0.15em);
          left: calc(50% - 0.15em);
          width: 0.3em;
          height: 5em;
          transform-origin: 50% calc(100% - 0.15em);
        }
        .clock__hand--sec {
          animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite;
          bottom: calc(50% - 1.5em);
          left: calc(50% - 0.1em);
          width: 0.2em;
          height: 6.5em;
          transform-origin: 50% calc(100% - 1.5em);
        }
        .clock__hand--sec:before {
          background-color: inherit;
          border-radius: 50%;
          content: "";
          display: block;
          position: absolute;
          bottom: 1.3em;
          left: calc(50% - 0.2em);
          width: 0.4em;
          height: 0.4em;
        }
        
        /* Dark theme */
        @media (prefers-color-scheme: dark) {
          :root {
            --bg: #2e3138;
            --fg: #e3e4e8;
          }
        
          .clock {
            background: radial-gradient(100% 100% at 50% 10%, white, #8f95a3 50%);
          }
          .clock__inner-frame {
            background: linear-gradient(#454954, #737a8c);
            box-shadow: 0 0.1em 0 #999999 inset;
          }
          .clock__ticks {
            background: linear-gradient(#17181c, #2e3138);
          }
        }
        /* Animations */
        @keyframes hrHand {
          0% {
            transform: rotate(0deg);
          }
          4.1666666667% {
            transform: rotate(-330deg);
          }
          8.3333333333% {
            transform: rotate(-660deg);
          }
          12.5% {
            transform: rotate(-990deg);
          }
          16.6666666667% {
            transform: rotate(-1320deg);
          }
          20.8333333333% {
            transform: rotate(-1650deg);
          }
          25% {
            transform: rotate(-1980deg);
          }
          29.1666666667% {
            transform: rotate(-2310deg);
          }
          33.3333333333% {
            transform: rotate(-2640deg);
          }
          37.5% {
            transform: rotate(-2970deg);
          }
          41.6666666667.........完整代码请登录后点击上方下载按钮下载查看

网友评论0