diff --git "a/\344\275\234\344\270\232/20211126-CSS10\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/demo.html" "b/\344\275\234\344\270\232/20211126-CSS10\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/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0d3e00bdd050ae8b0a0ff2544e0001fde14487f3
--- /dev/null
+++ "b/\344\275\234\344\270\232/20211126-CSS10\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/demo.html"
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			* {
+				margin: 0;
+				padding: 0;
+			}
+
+			.box {
+				margin: 100px auto;
+				width: 300px;
+				height: 300px;
+				border: 10px solid #31bae4;
+				border-radius: 50%;
+				position: relative;
+			}
+
+			.line {
+				width: 10px;
+				height: 300px;
+				background-color: #CCCCCC;
+				position: absolute;
+				left: 50%;
+				transform: translate(-50%, 0);
+			}
+
+			.line2 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(30deg);
+			}
+
+			.line3 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(60deg);
+			}
+
+			.line4 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(90deg);
+			}
+
+			.line5 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(120deg);
+			}
+
+			.line6 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(150deg);
+			}
+
+			.roundness {
+				position: absolute;
+				border-radius: 50%;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+
+			.circle {
+				width: 270px;
+				height: 270px;
+				background-color:white;
+			}
+
+			.needle {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -100%);
+			}
+
+			.hour {
+				width: 10px;
+				height: 70px;
+				background-color: rgb(128, 126, 0);
+				border-radius: 5px;
+				transform-origin: center bottom;
+				animation: clock 43200s linear infinite;
+			}
+
+			.minute {
+				width: 7px;
+				height: 90px;
+				background-color: skyblue;
+				border-radius: 5px;
+				transform-origin: center bottom;
+				animation: clock 3600s linear infinite;
+			}
+
+			.second {
+				width: 4px;
+				height: 110px;
+				background-color: rgb(0, 255, 255);
+				border-radius: 2px;
+				transform-origin: center bottom;
+				animation: clock 60s linear infinite;
+			}
+
+			.cir {
+				width: 20px;
+				height: 20px;
+				background-color: rgb(197, 34, 34);
+			}
+
+			@keyframes clock {
+				0% {
+					transform: translate(-50, -100%);
+				}
+
+				100% {
+					transform: translate(-50%, -100%) rotate(360deg);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box">
+			<div class="line line1"></div>
+			<div class="line line2"></div>
+			<div class="line line3"></div>
+			<div class="line line4"></div>
+			<div class="line line5"></div>
+			<div class="line line6"></div>
+			<div class="roundness circle"></div>
+			<div class="needle hour"></div>
+			<div class="needle minute"></div>
+			<div class="needle second"></div>
+			<div class="roundness cir"></div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
