From b8bc6a1f7279d55851eb924c1d41cc84999d2be9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=AC=A7=E9=9B=AF?= <2836892088@qq.com>
Date: Fri, 26 Nov 2021 21:33:56 +0800
Subject: [PATCH] =?UTF-8?q?211126-=E8=BD=AC=E6=8D=A2=E8=BF=87=E6=B8=A1?=
 =?UTF-8?q?=E5=92=8C=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo01.html"                              | 169 ++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 "\346\235\216\346\254\247\351\233\257/211126-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo01.html"
diff --git "a/\346\235\216\346\254\247\351\233\257/211126-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo01.html" "b/\346\235\216\346\254\247\351\233\257/211126-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo01.html"
new file mode 100644
index 0000000..f378c6a
--- /dev/null
+++ "b/\346\235\216\346\254\247\351\233\257/211126-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo01.html"
@@ -0,0 +1,169 @@
+<!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>
+    .clock {
+        width: 200px;
+        height: 200px;
+        border-radius: 50%;
+        border: 4px solid black;
+        background-color: black;
+        margin: 0 auto;
+        position: relative;
+    }
+
+    .center {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: #cccccc;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+    }
+
+    .scale {
+        width: 5px;
+        height: 200px;
+        background-color: #cccccc;
+        position: absolute;
+        left: 49%;
+    }
+
+    .scale1 {
+        transform: rotate(30deg);
+    }
+
+    .scale2 {
+        transform: rotate(60deg);
+    }
+
+    .scale3 {
+        transform: rotate(90deg);
+    }
+
+    .scale4 {
+        transform: rotate(120deg);
+    }
+
+    .scale5 {
+        transform: rotate(150deg);
+    }
+
+    .scale6 {
+        transform: rotate(180deg);
+    }
+
+    .name {
+        position: absolute;
+        left: 42%;
+        top: 40px;
+        color: #F4CD5B;
+        font-size: small;
+    }
+
+    .blank {
+        width: 170px;
+        height: 170px;
+        border-radius: 50%;
+        background-color: black;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .hours {
+        position: absolute;
+        width: 10px;
+        height: 45px;
+        background-color: #666666;
+        left: 50%;
+        top: 0%;
+        margin-top: 55px;
+        transform: translate(-50%, -50%);
+        transform-origin: bottom center;
+        transform: rotate(30deg);
+        margin-left: -5px;
+    }
+
+    .minute {
+        position: absolute;
+        width: 8px;
+        height: 60px;
+        background-color: #999999;
+        left: 50%;
+        top: 0%;
+        margin-top: 40px;
+        transform: translate(-50%, -50%);
+        transform-origin: bottom center;
+        transform: rotate(70deg);
+        margin-left: -4px;
+    }
+
+    .second {
+        position: absolute;
+        width: 3px;
+        height: 70px;
+        background-color: brown;
+        left: 50%;
+        top: 0%;
+        margin-top: 30px;
+        transform-origin: bottom center;
+        /* animation: myfirst 60s steps(60) infinite; */
+        z-index: 2;
+    }
+
+    @keyframes myfirst {
+        form {
+            /* transform: rotate(0deg); */
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+
+    }
+</style>
+
+<body>
+    <div class="clock">
+        <div class="scale scale1"></div>
+        <div class="scale scale2"></div>
+        <div class="scale scale3"></div>
+        <div class="scale scale4"></div>
+        <div class="scale scale5"></div>
+        <div class="scale scale6"></div>
+        <div class="blank"></div>
+        <div class="hours"></div>
+        <div class="minute"></div>
+        <div class="second"></div>
+        <div class="center"></div>
+        <div class="name">Rolex</div>
+    </div>
+</body>
+<script>
+    function Time() {
+        var date = new Date();
+        var hours = date.getHours();
+        var minute = date.getMinutes();
+        var second = date.getSeconds();
+        var hours2 = hours * 30 + minute * 0.5 + second / 120;
+        var minute2 = minute * 6 + second * 0.1;
+        var second2 = second * 6;
+        document.querySelector('.hours').style.transform = `rotate(${hours2}deg)`;
+        document.querySelector('.minute').style.transform = `rotate(${minute2}deg)`;
+        document.querySelector('.second').style.transform = `rotate(${second2}deg)`;
+    }
+    Time();
+    setInterval(Time, 1000);
+</script>
+
+</html>
\ No newline at end of file
-- 
Gitee

