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

代码语言:html

所属分类:其他

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

代码标签: css 挂壁 木纹 时钟

下面为部分代码预览,完整代码请点击下载或在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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0