From e17070e2cb1a2467980e0506ec01c2796611744b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=A2=A6=E8=AF=97?= <844715758@qq.com>
Date: Fri, 26 Nov 2021 17:27:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4211126css=E4=BD=9C=E4=B8=9A-?=
 =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E8=BF=87=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\346\227\266\351\222\237.html"            | 149 ++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 "\345\210\230\346\242\246\350\257\227/211126css\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\345\272\246/\346\227\266\351\222\237.html"
diff --git "a/\345\210\230\346\242\246\350\257\227/211126css\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\345\272\246/\346\227\266\351\222\237.html" "b/\345\210\230\346\242\246\350\257\227/211126css\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\345\272\246/\346\227\266\351\222\237.html"
new file mode 100644
index 0000000..b0efdab
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211126css\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\345\272\246/\346\227\266\351\222\237.html"
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			* {
+				padding: 0px;
+				margin: 0px;
+			}
+			body{
+				background-color: #fffae8;
+			}
+			.clock {
+				width: 400px;
+				height: 400px;
+				border: 10px solid #fed980;
+				border-radius: 50%;
+				margin: 0 auto;
+				position: relative;
+			}
+
+			.line {
+				width: 10px;
+				height: 400px;
+				background-color: #fed980;
+				position: absolute;
+				left: 50%;
+				transform: translate(-50%, 0);
+			}
+
+			.line1 {
+				transform: translate(-50%, 0) rotate(0deg);
+			}
+
+			.line2 {
+				transform: translate(-50%, 0) rotate(30deg);
+			}
+
+			.line3 {
+				transform: translate(-50%, 0) rotate(60deg);
+			}
+
+			.line4 {
+				transform: translate(-50%, 0) rotate(90deg);
+			}
+
+			.line5 {
+				transform: translate(-50%, 0) rotate(120deg);
+			}
+
+			.line6 {
+				transform: translate(-50%, 0) rotate(150deg);
+			}
+
+			.shade {
+				width: 350px;
+				height: 350px;
+				border-radius: 50%;
+				background-color: #fffae8;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+			}
+
+			.circle {
+				width: 20px;
+				height: 20px;
+				border-radius: 50%;
+				background-color: #fed980;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+			}
+
+			.hour {
+				width: 10px;
+				height: 100px;
+				background-color: #F4B46A;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -100%);
+				animation-name: move;
+				animation-duration: 43200s;
+				animation-iteration-count: infinite;
+				animation-timing-function: linear;
+				transform-origin: bottom center;
+			}
+
+			.minutes {
+				width: 8px;
+				height: 110px;
+				background-color: #ffec7b;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -100%);
+				animation-name: move;
+				animation-duration: 3600s;
+				animation-iteration-count: infinite;
+				animation-timing-function: linear;
+				transform-origin: bottom center;
+			}
+
+			.seconds {
+				width: 5px;
+				height: 120px;
+				background-color: #ce8f40;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -100%);
+				animation-name: move;
+				animation-duration: 60s;
+				animation-iteration-count: infinite;
+				animation-timing-function: steps(60);
+				transform-origin: bottom center;
+			}
+
+			@keyframes move {
+				from {
+					transform: translate(-50%, -100%) rotate(0);
+				}
+
+				to {
+					transform: translate(-50%, -100%) rotate(360deg);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="clock">
+			<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="shade"></div>
+			<div class="hour"></div>
+			<div class="minutes"></div>
+			<div class="seconds"></div>
+			<div class="circle"></div>
+		</div>
+	</body>
+</html>
-- 
Gitee

