css实现2022新年时钟效果代码-html代码-BFW代码库

css实现2022新年时钟效果代码

代码语言：html

代码描述：css实现2022新年时钟效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body {
          min-height: 100vh;
          display: grid;
          place-items: center;
          background-color: #dde1e7;
          font-size: 3.5vmin;
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e0404c255106.png");
          background-size: cover;
          background-position: center;
          --colorNumbers: rgba(240, 193, 140, 0.6);
        }
        
        .clock {
          width: 10em;
          aspect-ratio: 1/1;
          background: radial-gradient(transparent 50%, var(--colorNumbers) 51%);
          border-radius: 50%;
          display: grid;
          place-items: center;
        }
        .inner {
          width: 7.25em;
          aspect-ratio: 1/1;
          border-radius: 50%;
          display: grid;
          position: relative;
        }
        
        /* handles */
        .handles {
          width: 100%;
          height: 100%;
          aspect-ratio: 1/1;
          border-radius: 50%;
          display: grid;
          align-items: center;
          position: relative;
          transform: rotate(-90deg);
        }
        .handle {
          position: absolute;
          border-radius: 100vmax;
          height: var(--handleHeight);
          width: calc(var(--handleLength) + var(--handleOverflow));
          left: calc(50% - var(--handleHeight) / 2 - var(--handleOverflow));
          transform-origin: calc(var(--handleHeight) / 2 + var(--handleOverflow))
            calc(var(--handleHeight) / 2);
          transform: rotate(0);
        }
        .handle.hour {
          --handleHeight: 0.4em;
          --handleLength: 2.2em;
          --handleOverflow: 0em;
          background: #0c0c0d;
        }
        .handle.minute {
          --handleHeight: 0.3em;
          --handleLength: 3em;
          --handleOverflow: 0em;
          background: #0c0c0d;
        }
        .handle.second {
          --handleHeight: 0.1em;
          --handleLength: 3.25em;
          --handleOverflow: 0.5em;
          background: #fd0e0e;
        }
        /* handle circles */
        .circle {
          position: absolute;
          height: var(--circleHeight);
          aspect-ratio: 1/1;
          left: calc(50% - var(--circleHeight) / 2);
          border-radius: 50%;
        }
        .circle.back {
          --circleHeight: 0.7em;
          background: #0c0c0d;
        }
        .circle.front {
          --circleHeight: 0.4em;
          background: #fd0e0e;
        }
        
        /* numbers */
        .numbers {
          position: absolute;
          width: 100%;
          aspect-ratio: 1/1;
          display: grid;
          place-items: center;
          transform: rotate(-90deg);
        }
        .numbers > .number {
          position: absolute;
          width: 9.325em;
          display: flex;
          justify-content: flex-end;
          transform: rotate(calc(30deg * var(--number)));
        }
        .numbers > .number > span {
          font-family: "Montserrat", sans-serif;
          font-size: 0.75em;
          width: 1em;
          text-align: center;
          color: rgb(26, 24, 23);
          transform: rotate(calc(-30deg * var(--number) + 90deg));
        }
        
        .wrapper {
          display: flex;
          align-items: center;
          filter: drop-shadow(0.1em 0.1em.........完整代码请登录后点击上方下载按钮下载查看