From e70cae896569b5a07455351a9acf304788f339b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=A0=E7=9A=84=E5=A7=93=E5=90=8D?= <你的邮箱>
Date: Sun, 28 Nov 2021 21:53:46 +0800
Subject: [PATCH] =?UTF-8?q?20211126-CSS10=E4=BD=9C=E4=B8=9A-=E8=BD=AC?=
 =?UTF-8?q?=E6=8D=A2=E8=BF=87=E6=B8=A1=E5=92=8C=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo.html"                                | 135 ++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 "\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"
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 0000000..0d3e00b
--- /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
-- 
Gitee

