js+css实现简洁立体时钟转动指针显示时间代码-html代码-BFW代码库

js+css实现简洁立体时钟转动指针显示时间代码

代码语言：html

代码描述：js+css实现简洁立体时钟转动指针显示时间代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-block-size: 100vh;
    display: grid;
    place-content: center;
    background: hsl(202, 6%, 75%);
}

.clock {
    --clock-frame: 20rem;
    --total-count: 12;
    inline-size: var(--clock-frame);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    background: hsl(193 12 86)
        radial-gradient(
            70% 70% at 30% 20%,
            #fff 10%,
            40%,
            hsl(206, 12%, 88%),
            hsla(203, 7%, 76%, 0.7)
        );

    box-shadow: 0 -1px 1px 0px hsla(201, 23%, 96%, 0.7),
        0 -3px 1px 2px hsl(200, 9%, 22%), 0 3px 1px 1.5px hsl(200, 9%, 24%),
        0 7px 4px 0px #0005 inset, 0 -1px 0 0.5px hsl(200, 13%, 96%) inset,
        0 -.........完整代码请登录后点击上方下载按钮下载查看