css实现带有运动模糊指针效果的时钟代码-html代码-BFW代码库

css实现带有运动模糊指针效果的时钟代码

代码语言：html

所属分类：其他

代码描述：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: #c7cad1;
          --fg: #17181c;
          --primary: #255ff4;
          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;
          display: grid;
          place-items: center;
        }
        
        main {
          padding: 1.5em 0;
        }
        
        .clock {
          background: linear-gradient(#e3e4e8, #c7cad1);
          border-radius: 50%;
          box-shadow: 0 0.125em 0.25em rgba(255, 255, 255, 0.3) inset, 0 -0.125em 0.25em rgba(0, 0, 0, 0.3) inset, 0 0 0.75em rgba(0, 0, 0, 0.25);
          position: relative;
          width: 15em;
          height: 15em;
        }
        .clock__ticks, .clock__tick, .clock__hands, .clock__hand, .clock__hand-trail {
          position: absolute;
        }
        .clock__ticks {
          top: 0.5em;
          left: 0.5em;
          width: 14em;
          height: 14em;
        }
        .clock__tick, .clock__hand {
          background: currentColor;
        }
        .clock__tick {
          box-shadow: 0 0 0.75em rgba(0, 0, 0, 0.3);
          bottom: 50%;
          left: calc(50% - 0.05em);
          width: 0.1em;
          height: 0.5em;
          transform-origin: 50% 100%;
        }
        .clock__tick:nth-child(5n+1) {
          left: calc(50% - 0.1em);
          width: 0.2em;
          height: 1em;
        }
        .clock__tick:nth-child(1) {
          transform: rotate(0deg) translateY(-6em);
        }
        .clock__tick:nth-child(2) {
          transform: rotate(6deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(3) {
          transform: rotate(12deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(4) {
          transform: rotate(18deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(5) {
          transform: rotate(24deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(6) {
          transform: rotate(30deg) translateY(-6em);
        }
        .clock__tick:nth-child(7) {
          transform: rotate(36deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(8) {
          transform: rotate(42deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(9) {
          transform: rotate(48deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(10) {
          transform: rotate(54deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(11) {
          transform: rotate(60deg) translateY(-6em);
        }
        .clock__tick:nth-child(12) {
          transform: rotate(66deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(13) {
          transform: rotate(72deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(14) {
          transform: rotate(78deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(15) {
          transform: rotate(84deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(16) {
          transform: rotate(90deg) translateY(-6em);
        }
        .clock__tick:nth-child(17) {
          transform: rotate(96deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(18) {
          transform: rotate(102deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(19) {
          transform: rotate(108deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(20) {
          transform: rotate(114deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(21) {
          transform: rotate(120deg) translateY(-6em);
        }
        .clock__tick:nth-child(22) {
          transform: rotate(126deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(23) {
          transform: rotate(132deg) translateY(-6.5em);
        }
        .clock__tick:nth-child(24) {
          transform: rotate(138deg) translateY(-6.5em);
        .........完整代码请登录后点击上方下载按钮下载查看