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

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

代码语言：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((.........完整代码请登录后点击上方下载按钮下载查看