diff --git "a/\351\231\210\345\273\272\350\215\243/211126-css3-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo1.html" "b/\351\231\210\345\273\272\350\215\243/211126-css3-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dcb133f3c61173fc1648b8acb79aafd6fd16a7eb
--- /dev/null
+++ "b/\351\231\210\345\273\272\350\215\243/211126-css3-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo1.html"
@@ -0,0 +1,188 @@
+<!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>
+        body{
+            display: flex;
+            place-content: center center;
+        }
+        .container{
+            border: 5px solid black;
+            border-radius: 100%;
+            width: 200px;
+            height: 200px;
+            position: relative;
+            
+        }
+        .line1{
+            /* border: 4px solid grey; */
+            width: 6px;
+            height: 200px;
+            background-color: grey;
+            transform: rotate(30deg);
+            position: absolute;
+            left: 50%;
+           margin-left: -3px;
+        }
+        .line2{
+            width: 6px;
+            height: 200px;
+            background-color: grey;
+            left: 50%;
+           margin-left: -3px;
+            transform: rotate(60deg) ;
+            position: absolute;
+           
+        }
+        .line3{
+            width: 6px;
+            height: 200px;
+            background-color: grey;
+            left: 50%;
+           margin-left: -3px;
+            transform: rotate(90deg);
+            position: absolute;
+        }
+        .line4{
+            width: 6px;
+            height: 200px;
+            background-color: grey;
+            left: 50%;
+           margin-left: -3px;
+            transform: rotate(120deg);
+            position: absolute;
+        }
+        .line5{
+            width: 6px;
+            height: 200px;
+            background-color: grey;
+            left: 50%;
+           margin-left: -3px;
+            transform: rotate(180deg);
+            position: absolute;
+           
+        }
+        .line6{
+            width: 6px;
+            height: 200px;
+            background-color: grey;
+            left: 50%;
+           margin-left: -3px;
+            transform: rotate(150deg);
+            position: relative ;
+           
+        }
+        .clock{
+            width: 180px;
+            height: 180px;
+            border-radius: 50%;
+            background-color: white;
+            /* left: 50%;
+            height: 50%; */
+            transform:translate(5%,-105%);
+           
+        }
+        .center{
+            height: 20px;
+            width: 20px;
+            background-color: black;
+            border-radius: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -10px;
+            margin-left: -10px;
+            z-index: 1;
+        }
+        .seconds{
+            height: 70px;
+            width: 2px;
+            background-color: red;
+            position: absolute;
+            left: 50%;
+           margin-left: -1px;
+           top: 50%;
+          
+        }
+        .minute{
+            height: 50px;
+            width: 4px;
+            background-color: gray;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: rotate(180deg);
+            margin-left: -2px;
+            transform-origin: top center;
+            animation: time 3600s steps(3600) infinite;
+        }
+        .hour{
+            height: 40px;
+            width: 6px;
+            background-color: black;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: rotate(180deg);
+            margin-left: -3px   ;
+            transform-origin: top center;
+            animation: time 42300s steps(42300) infinite;
+        }
+        #c1{
+            transform: rotate(180deg);
+           transform-origin: top center;
+           animation: time 60s steps(60) infinite;
+        }
+        @keyframes time{
+            from{}
+            to{
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <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="clock"></div>
+        <div class="center"></div>
+        <div class="seconds" id="c1"></div>
+        <div class="minute" id="c2"></div>
+        <div class="hour" id="c3"></div>
+      
+    </div>
+    <script>
+        let date =new Date();
+        let hours = date.getHours();
+        let minutes = date.getMinutes();
+        let seconds = date.getSeconds();
+        let hour = (hours >= 12)? hours-12 :hours; 
+        let c1=document.getElementById('c1');
+        let num = 360/60*seconds-180;
+        let num1 =360/3600*(minutes*60 +seconds)-180;
+        let num2 =360/42300*(hour*3600+minutes*60+seconds)-180;
+        // c1.style.transform =;
+        // c1.style.cssText="transform:rotate((360/60*"+seconds+"+180)deg);";
+        c1.style.transform=`rotate(${num}deg)`;
+        // 每秒转几度
+        let c2 = document.getElementById('c2');
+        c2.style.transform=`rotate(${num1}deg)`;
+        let c3 = document.getElementById('c3');
+        c3.style.transform=`rotate(${num2}deg)`;
+        // console.log("rotate((360/60*"+seconds+"+180)deg)");
+        // sec.style.transform=`rotate((360/60*${seconds}+180)deg)`;
+        // sec.style.cssText=`transform:rotate((360/60*${seconds}+180)deg);`;
+       // 360 / 42300 * (hour * 3600 + minutes * 60 +seconds)
+        // console.log(`rotate((360/60*${seconds}+180)deg)`);
+        //    sec.style.transform='romate(250deg)';
+    </script>
+</body>
+</html>
\ No newline at end of file
