js+css布局实现立体棋子指针时钟显示时间代码-html代码-BFW代码库

js+css布局实现立体棋子指针时钟显示时间代码

代码语言：html

代码描述：js+css布局实现立体棋子指针时钟显示时间代码

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

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

<head>
  <meta charset="UTF-8">
  <title>3D Button Analog Clock</title>
  
<style>
/* --- Original Styles --- */
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --brand-primary: hsl(209, 77%, 46%);
    --brand-primary-tint: hsl(218, 62%, 75%);
    --brand-primary-shade: hsl(212, 61%, 33%);
    --brand-primary-tone: hsl(216, 40%, 52%);
    --brand-secondary: hsl(29, 77%, 54%);
    --brand-secondary-tint: hsl(27, 84%, 71%);
    --brand-secondary-shade: hsl(29, 61%, 32%);
    --brand-secondary-tone: hsl(28, 51%, 54%);
    /* color indexed elements */
    --color-0: hsl(0, 85%, 55%);
    --color-1: hsl(30, 82%, 50%);
    --color-2: hsl(60, 85%, 55%);
    --color-3: hsl(82, 89%, 51%);
    --color-4: hsl(126, 82%, 48%);
    --color-5: hsl(154, 84%, 49%);
    --color-6: hsl(177, 88%, 50%);
    --color-7: hsl(200, 90%, 50%);
    --color-8: hsl(220, 86%, 56%);
    --color-9: hsl(270, 78%, 60%);
    --color-10: hsl(296, 88%, 54%);
    --color-11: hsl(330, 82%, 50%);
}

body {
    min-block-size: 100vh;
    display: grid;
    background: radial-gradient(
            circle at 20% 80%,
            var(--brand-primary-tint) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            var(--brand-secondary-tint) 0%,
            transparent 50%
        ),
        radial-gradient(circle at 40% 40%, #95f582dd 0%, transparent 50%),
        linear-gradient(135deg, #bae3 0%, #a4d4f0ad 100%);
}

.color-circle {
    --main-circle: clamp(20rem, 9rem + 37vw, 28rem);
    --button-size: calc(var(--main-circle) * 0.15);
    --r.........完整代码请登录后点击上方下载按钮下载查看