From d2d5307084daa8290d17d06dd69391c9833e9ba8 Mon Sep 17 00:00:00 2001
From: unknown <2831255080@qq.com>
Date: Fri, 26 Nov 2021 18:24:15 +0800
Subject: [PATCH] =?UTF-8?q?css=E5=8A=A8=E6=80=81=E6=97=B6=E9=92=9F=2011.26?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo.html"                                | 167 ++++++++++++++++++
 1 file changed, 167 insertions(+)
 create mode 100644 "\346\236\227\345\271\274\350\212\263/2021.11.26--\346\227\266\351\222\237\345\212\250\347\224\273\346\225\210\346\236\234/demo.html"
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.26--\346\227\266\351\222\237\345\212\250\347\224\273\346\225\210\346\236\234/demo.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.26--\346\227\266\351\222\237\345\212\250\347\224\273\346\225\210\346\236\234/demo.html"
new file mode 100644
index 0000000..06e3cda
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.26--\346\227\266\351\222\237\345\212\250\347\224\273\346\225\210\346\236\234/demo.html"
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    body{
+        background-color: #eee;
+    }
+    .clock{
+        position:absolute;
+        top:50%;
+        left: 50%;
+        width: 400px;
+        height: 400px;
+        border: 5px solid black;
+        border-radius: 50%;
+        transform: translate(-50%,-50%);
+    }
+    /*中心点*/
+    .center{
+        position: absolute;
+        width:25px;
+        height: 25px;
+        top:50%;
+        left: 50%;
+        background-color: black;
+        border-radius: 50%;
+        transform:translate(-50%,-50%);
+        z-index: 2;
+    }
+    /*刻度*/
+    /* .scale{
+        position: absolute;
+        width:10px;
+        height: 400px;
+        top:50%;
+        left: 50%;
+        background-color: black;
+        transform: translate(-50%,-50%);
+    } */
+    .clock div:nth-child(-n+6) {
+            width: 10px;
+            height: 400px;
+            background-color: #aaa;
+            position: absolute;
+            top:50%;
+            left: 50%;
+            /* transform: translate(-50%,-50%); */
+            margin-left: -5px;
+            margin-top: -200px;
+        } 
+        .scale1 {
+            transform: rotate(30deg);
+        }
+
+        .scale2 {
+            transform: rotate(60deg);
+        }
+
+        .scale3 {
+            transform: rotate(90deg);
+        }
+
+        .scale4 {
+            transform: rotate(120deg);
+        }
+
+        .scale5 {
+            transform: rotate(150deg);
+        }
+
+        .scale6 {
+            transform: rotate(180deg);
+        }
+        /* 设置中心圆盘 */
+        .cell{
+            position: absolute;
+            width: 370px;
+            height: 370px;
+            background-color: #eee;
+            border-radius: 50%;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        /* 时针 */
+        .hour{
+            position: absolute;
+            width: 15px;
+            height: 80px;
+            background-color: blueviolet;
+            left: 50%;
+            top: 200px;
+            margin-left: -7px;
+            animation: move 43200s linear infinite;
+            transform-origin: center bottom;
+
+        }
+        /* 分针 */
+        .minute {
+            width: 6px;
+            height: 100px;
+            background-color: yellow;
+            position: absolute;
+            left: 200px;
+            top:100px;
+            /* margin-left: -18px;   */
+            animation: move 3600s linear infinite;
+            transform-origin: center bottom;        
+        }
+
+        .second{
+            width: 4px;
+            height: 120px;
+            background-color: greenyellow;
+            position: absolute;
+            left: 210px;
+            top: 75px;
+            margin-left: -15px;
+            animation: move 60s linear infinite;
+            transform-origin: center bottom;
+        }
+        @keyframes move{
+        from{
+            transform: rotate(0deg);
+        }
+        to{
+            transform: rotate(360deg);
+        }
+    }
+</style>
+<body>
+    <div class="clock">
+        <div class="scale1"></div>
+        <div class="scale2"></div>
+        <div class="scale3"></div>
+        <div class="scale4"></div>
+        <div class="scale5"></div>
+        <div class="scale6"></div>
+        <div class="center"></div>
+        <div class="cell"></div>
+        <div class="hour"></div>
+        <div class="minute"></div>
+        <div class="second"></div>
+    </div>
+    <script>
+        function time(){
+            let date=new Date();
+            let hours=date.getHours();
+            let minutes=date.getMinutes();
+            let seconds=date.getSeconds();
+            let h=document.querySelector('.hour').style.transform=`rotate(${hours*30+minutes*0.5+seconds/120}deg)`;
+            console.log(h); 
+           let m= document.querySelector('.minute').style.transform=`rotate(${minutes*6 +seconds*0.1}deg)`;
+           console.log(m);
+            let s=document.querySelector('.second').style.transform=`rotate(${seconds*6}deg)`;
+            console.log(s);
+            
+        }
+        time();
+        setInterval(time,1000);
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

