diff --git "a/\347\216\213\350\211\272\346\236\227/211126-css\344\275\234\344\270\232\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/myClock.html" "b/\347\216\213\350\211\272\346\236\227/211126-css\344\275\234\344\270\232\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/myClock.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8be801738c8dfe71feb30ecd109ce707371359d6
--- /dev/null
+++ "b/\347\216\213\350\211\272\346\236\227/211126-css\344\275\234\344\270\232\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/myClock.html"
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        body{
+            background-color: #000
+        }
+        .clock{
+            position: relative;
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            background-color: #000;
+            box-shadow: 0px 0px 16px 5px skyblue;
+            border: 4px solid skyblue;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+        }
+        [class^='line']{
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            background-color: orange;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        .line1{
+            transform: rotate(30deg);
+        }
+        .line2{
+            transform: rotate(60deg);
+        }
+        .line3{
+            transform: rotate(90deg);
+        }
+        .line4{
+            transform: rotate(120deg);
+        }
+        .line5{
+            transform: rotate(150deg);
+        }
+        /* 现在需要一个面来罩住多余的线 */
+        .mask{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            background-color: #000;
+            /* 剩出百分之10来显示时间的刻度 */
+            width: 90%;
+            height: 90%;
+            border-radius: 50%;
+            transform: translate(-50%,-50%);
+        }
+        /* 时针 */
+        .hour{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            background-color: blue;
+            width: 6px;
+            height: 20%;
+            border-top-left-radius: 50%;
+            border-top-right-radius: 50%;
+            transform: translate(-50%,-100%);
+            transform-origin: bottom;
+            /* 12*60*60 */
+            animation: rotate 43200s linear infinite;
+        }
+        .min{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            background-color: green;
+            width: 4px;
+            height: 25%;
+            border-top-left-radius: 50%;
+            border-top-right-radius: 50%;
+            transform: translate(-50%,-100%);
+            transform-origin: bottom;
+            /* 60*60 */
+            animation: rotate 3600s linear infinite;
+        }
+        .sec{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            background-color: pink;
+            width: 2px;
+            height: 40%;
+            border-top-left-radius: 50%;
+            border-top-right-radius: 50%;
+            transform: translate(-50%,-100%);
+            transform-origin: bottom;
+        
+            /* 秒针设一个step（60）让他阶跃 */
+            animation: rotate 60s steps(60) infinite;
+        }
+        /* 搞一个圆点放在中间 */
+        .center{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            background-color: white;
+            width: 10%;
+            height: 10%;
+            border-radius: 50%;
+            transform: translate(-50%,-50%);
+            z-index: 6;
+        }
+        @keyframes rotate{
+            from{}
+            to{
+                transform: translate(-50%,-100%) rotate(360deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="clock">
+        <div class="line1"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+        <div class="line4"></div>
+        <div class="line5"></div>
+        <div class="line6"></div>
+        <div class="mask"></div>
+        <div class="center"></div>
+        <div class="hour"></div>
+        <div class="min"></div>
+        <div class="sec"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
