css+js实现木质条纹挂壁式时钟时针走动效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+js实现木质条纹挂壁式时钟时针走动效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap&text=1234567890abcdehmnorsuw" rel="stylesheet">



    <style>
        :root {
          --hour: 0deg;
          --minute: 0deg;
          --second: 0deg;
        }
        
        html,
        body {
          height: 100%;
        }
        
        body {
          background-color: #303f9f;
          display: grid;
          font-family: "Lato", sans-serif;
          margin: 0;
          place-items: center;
        }
        
        .clock {
          background-color: #b7b19e;
          background-image: linear-gradient(#815f28, #815f28), url(//repo.bfw.wiki/bfwrepo/image/6219d44222d38.png);
          background-size: cover;
          background-blend-mode: saturation;
          display: grid;
          height: 90vmin;
          place-items: center;
        }
        .clock, .clock__inner {
          aspect-ratio: 1/1;
          border-radius: 100%;
        }
        .clock__center {
          aspect-ratio: 1/1;
          background: #6d4c41 url(//repo.bfw.wiki/bfwrepo/image/6219d450874d6.png);
          background-blend-mode: overlay;
          background-size: cover;
          border-radius: 100%;
          bottom: 0;
          box-shadow: 0 0 0 0.67vmin #000;
          left: 0;
          margin: auto;
          position: absolute;
          right: 0;
          top: 0;
          width: 25%;
          z-index: 20;
        }
        .clock__divider {
          background-color: #000;
          height: 100%;
          left: 0;
          margin: auto;
          position: absolute;
          right: 0;
          width: 0.67vmin;
          z-index: 10;
        }
        .clock__divider:nth-child(1) {
          transform: rotate(calc((90deg / 3 * 0) + 45deg));
        }
        .clock__divider:nth-child(2) {
          transform: rotate(calc((90deg / 3 * 1) + 45deg));
        }
        .clock__divider:nth-child(3) {
          transform: rotate(calc((90deg / 3 * 2) + 45deg));
        }
        .clock__divider:nth-child(4) {
          transform: rotate(calc((90deg / 3 * 3) + 45deg));
        }
        .clock__divider:nth-child(5) {
          transform: rotate(calc((90deg / 3 * 4) + 45deg));
        }
        .clock__divider:nth-child(6) {
          transform: rotate(calc((90deg / 3 * 5) + 45deg));
        }
        .clock__gear {
          aspect-ratio: 1/1;
          background-color: #b7b19e;
          background-image: radial-gradient(#190f0f 48%, transparent 50%), linear-gradient(to right, transparent, #0003 50%, transparent 50%), url(//repo.bfw.wiki/bfwrepo/image/6219d44222d38.png);
          border-radius: 100%;
          bottom: 0;
          left: 0;
          margin: auto;
          position: absolute;
          right: 0;
          top: 0;
          transform: rotate(var(--minute));
          width: 3.75vmin;
          z-index: 50;
        }
        .clock__hour, .clock__minute, .clock__second {
          background: linear-gradient(to right, transparent, #0003 50%, transparent 50%), url(//repo.bfw.wiki/bfwrepo/image/6219d44222d38.png);
          background-color: #c9c4b6;
          left: 0;
          margin: auto;
          position: absolute;
          right: 0;
          transform-origin: bottom center;
          width: 3vmin;
        }
        .clock__hour::before, .clock__minute::before, .clock__second::before {
          background: linear-gradient(to right, transparent, #0003 50%, transparent 50%), url(//repo.bfw.wiki/bfwrepo/image/6219d44222d38.png);
          background-color: #c9c4b6;
          bottom: -10%;
          content: "";
          position: absolute;
          height: 10%;
          width: 100%;
        }
        .clock__hour {
          clip-path: polygon(10% 40%, 50% calc(40% - 2vmin), 90% 40%, 100% calc(110% - 2vmin), 50% 110%, 0 calc(110% - 2vmin), 0 110%);
          height: 50%;
          top: 0;
          transform: rotate(var(--hour));
          z-index: 40;
        }
        .clock__inner {
          background-blend-mode: overlay;
          background-position: center center;
          background-size: 200%;
          box-shadow: inset 0 1vmax 10vmax;
          font-size: 8vmin;
          line-height: 1;
          position: relative;
          width: calc(100% - 3vmin);
        }
        .clock__minute {
          clip-path: polygon(10% 15%, 50% calc(15% - 2vmin), 90% 15%, 100% calc(110% - 2vmin), 50% 110%, 0 calc(110% - 2vmin), 0 110%);
          height: 50%;
          top: 0;
          transform: rotate(var(--minute));
          z-index: 30;
        }
        .clock__numerals {
          aspect-ratio: 1/1;
          border-radius: 100%;
          overflow: hidden;
          position: relative;
          width: 100%;
        }
        .clock__number {
          align-items: center;
          background: #6d4c41 url(//repo.bfw.wiki/bfwrepo/image/6219d450874d6.png);
          background-blend-mode: overlay;
          box-sizing: border-box;
          clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
          color: gold;
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: space-between;
          left: 0;
          margin: auto;
          padding: 4vmin 0;
          position: absolute;
          right: 0;
          width: 26%;
          background-size: 400% 200%;
        }
        .clock__number::after, .clock__number::before {
          content: "";
          height: 15%;
          position: absolute;
          width: 1.5vmin;
        }
        .numerals .clock__number::after, .numerals .clock__number::before {
          height: 3vmin;
        }
        .clock__number::after {
          background-image: linear-gradient(to top, #3e272380, transparent 25%), url(//repo.bfw.wiki/bfwrepo/image/6219d44222d38.png);
          background-color: #c9c4b6;
          bottom: 0;
        }
        .clock__number::before {
          background-image: linear-gradient(#3e272380, transparent 25%), url(//repo.bfw.wiki/bfwrepo/image/6219d44222d38.png);
          background-color: #c9c4b6;
          top: 0;
        }
        .clock__number:nth-child(1) {
          background-position: calc(10% * 0) calc(10% * 0);
          transform: rotate(calc(90deg / 3 * 0));
        }
        .clock__number:nth-child(1) span {
          background-image: url(//repo.bfw.wiki/bfwrepo/image/6219d44222d38.png);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          display: none;
          filter: drop-shadow(1px 1px 2px #000c);
          transform: rotate(calc(-90deg / 3 * 0));
        }
        .numerals .clock__number:nth-child(1) span {
          display: block;
        }
        .clock__number:nth-child(2) {
          background-position: calc(10% * 1) calc(10% * 1);
          transform: rotate(calc(90deg / 3 * 1));
        }
        .clock__number:nth-child(2) span {
          background-image: url(//repo.bfw.wiki/bfwrepo/image/6219d44222d38.png);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          display: none;
          filter: drop-shadow(1px 1px 2px #000c);
          transform: rotate(calc(-90deg / 3 * 1));
    .........完整代码请登录后点击上方下载按钮下载查看