From 2973e3c67d6cbf63aa5c4534a95f06affb75b3b7 Mon Sep 17 00:00:00 2001
From: Cy <1582664772@qq.com>
Date: Sun, 28 Nov 2021 21:33:58 +0800
Subject: [PATCH] 11.28

---
 .../demo01.html"                              |  69 ++++++
 .../demo01.html"                              | 100 ++++++++
 .../demo01.html"                              |  93 ++++++++
 .../20211119-RGB/demo01.html"                 |  68 ++++++
 .../demo01.html"                              | 217 ++++++++++++++++++
 .../demo01.html"                              | 127 ++++++++++
 .../demo02.html"                              | 116 ++++++++++
 .../demo01.html"                              | 135 +++++++++++
 8 files changed, 925 insertions(+)
 create mode 100644 "\344\275\231\344\274\240\345\245\225/20211115-\351\233\252\350\212\261/demo01.html"
 create mode 100644 "\344\275\231\344\274\240\345\245\225/20211117-\345\244\252\346\236\201/demo01.html"
 create mode 100644 "\344\275\231\344\274\240\345\245\225/20211118-\346\226\207\345\255\227/demo01.html"
 create mode 100644 "\344\275\231\344\274\240\345\245\225/20211119-RGB/demo01.html"
 create mode 100644 "\344\275\231\344\274\240\345\245\225/20211124-flex\351\252\260\345\255\220/demo01.html"
 create mode 100644 "\344\275\231\344\274\240\345\245\225/20211125-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo01.html"
 create mode 100644 "\344\275\231\344\274\240\345\245\225/20211125-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo02.html"
 create mode 100644 "\344\275\231\344\274\240\345\245\225/20211126-transform\346\227\266\351\222\237/demo01.html"
diff --git "a/\344\275\231\344\274\240\345\245\225/20211115-\351\233\252\350\212\261/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211115-\351\233\252\350\212\261/demo01.html"
new file mode 100644
index 0000000..0833f6c
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211115-\351\233\252\350\212\261/demo01.html"
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+	<head>
+		<meta chartset="UTF-8">
+		<title></title>
+		<meta name="keywords" content="" />
+		<meta name="description" content="" />
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+			}
+
+			canvas {
+				background: black;
+			}
+		</style>
+	</head>
+	<body>
+		<canvas id="canvas">您的浏览器不支持canvas画布</canvas>
+		<script>
+			var can = document.getElementById('canvas');
+			var ctx = can.getContext('2d');
+			var wid = window.innerWidth;
+			var hei = window.innerHeight;
+			can.width = wid;
+			can.height = hei;
+			var snow = 100; //雪花数量
+			var arr = []; //保存雪花坐标，半径
+			for (var i = 0; i < snow; i++) {
+				arr.push({
+					x: Math.random() * wid,
+					y: Math.random() * hei,
+					r: Math.random() * 7
+				})
+			}
+
+			function DrawSnow() {
+				ctx.clearRect(0, 0, wid, hei);
+				ctx.beginPath();
+				for (var i = 0; i < snow; i++) {
+					var p = arr[i];
+					ctx.moveTo(p.x, p.y)
+					ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false)
+					ctx.fillStyle = "white";
+				}
+				ctx.fill();
+				ctx.stroke();
+				SnowFall()
+				ctx.closePath();
+			}
+			//雪花飘落
+			function SnowFall() {
+				for (var i = 0; i < snow; i++) {
+					var p = arr[i];
+					p.y += Math.random() * 50 + 1;
+					if (p.y > hei) {
+						p.y = 0;
+					}
+					p.x += Math.random() * 50 + 1;
+					if (p.x > wid) {
+						p.x = 0;
+					}
+				}
+			}
+			setInterval(DrawSnow, 100);
+		</script>
+	</body>
+</html>
diff --git "a/\344\275\231\344\274\240\345\245\225/20211117-\345\244\252\346\236\201/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211117-\345\244\252\346\236\201/demo01.html"
new file mode 100644
index 0000000..ec03ea5
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211117-\345\244\252\346\236\201/demo01.html"
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>太极图</title>
+		<style type="text/css">
+			/* body {
+				background-color: #eee;
+			}
+
+			.tj {
+				width: 0;
+				height: 400px;
+				margin: 50px auto;
+				border-left: 200px solid black;
+				border-right: 200px solid white;
+				border-radius: 50%;
+				position: relative;
+			}
+
+			.tj:after {
+				width: 200px;
+				height: 200px;
+				position: absolute;
+				content: '';
+				top: 0px;
+				left: -100px;
+				z-index: 1;
+				background-color: white;
+				border-radius: 50%;
+				box-shadow: 0 200px 0 #000;
+			}
+
+			.tj:before {
+				content: '';
+				position: absolute;
+				width: 40px;
+				height: 40px;
+				top: 70px;
+				left: -20px;
+				z-index: 2;
+				background-color: #000;
+				border-radius: 50%;
+				box-shadow: 0 200px 0 0 #fff;
+			} */
+			* {
+				margin: 0;
+				padding: 0;
+			}
+
+			.box {
+				position: relative;
+				width: 240px;
+				height: 120px;
+				margin: 100px auto;
+				border-style: solid;
+				border-width: 1px 1px 120px 1px;
+				border-radius: 50%;
+				animation: rot 2s infinite linear;
+			}
+
+			.box:before {
+				content: "";
+				position: absolute;
+				top: 50%;
+				left: 0;
+				width: 40px;
+				height: 40px;
+				background-color: #fff;
+				border-radius: 50%;
+				border: 40px solid #000;
+			}
+
+			.box:after {
+				content: "";
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				width: 40px;
+				height: 40px;
+				background-color: #000000;
+				border-radius: 50%;
+				border: 40px solid #fff;
+			}
+
+			@keyframes rot {
+				0% {
+					transform: rotate(0deg);
+				}
+
+				100% {
+					transform: rotate(360deg);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box"></div>
+	</body>
+</html>
diff --git "a/\344\275\231\344\274\240\345\245\225/20211118-\346\226\207\345\255\227/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211118-\346\226\207\345\255\227/demo01.html"
new file mode 100644
index 0000000..0b44f26
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211118-\346\226\207\345\255\227/demo01.html"
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			#whitespce {
+				width: 350px;
+				height: 50px;
+				border: 1px solid black;
+			}
+
+			#whitespce>P {
+				white-space: nowrap;
+				font-weight: 520;
+				font-family: "微软雅黑";
+			}
+
+			#pre {
+				margin-top: 80px;
+				width: 350px;
+				height: 50px;
+				border: 1px solid black;
+			}
+
+			#pre>p {
+				white-space: pre;
+			}
+
+			p.spread {
+				word-spacing: 10px;
+			}
+
+			p.tight {
+				word-spacing: -0.9em;
+			}
+
+			s {
+				margin-top: 50px;
+			}
+
+			div.jiange {
+				margin-top: 50px;
+			}
+
+			#box {
+				margin-top: 50px;
+				width: 400px;
+				height: 180px;
+				border: 1px solid black;
+			}
+
+			p.one {
+				letter-spacing: 10px;
+			}
+
+			p.two {
+				letter-spacing: -0.1em;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="whitespce">
+			<p>
+				inherit 规定应该从父元素继承 white-space 属性的值。pre-line 合并空白符序列，但是保留换行符。pre-wrap 保留空白符序列，但是正常地进行换行。
+				<h4>
+					white-space: nowrap 所有空格回车 制表符都合并成一个空格，文本 <span style="color: red;">不换行</span>！！！
+				</h4>
+			</p>
+		</div>
+		<div id="pre">
+
+			<p>床前 明月光，饮食 地 上霜，举 头望 明月，低头 思故乡</p>
+			<h4>white-space: pre 所有东西原样输出文本不换行</h4>
+		</div>
+
+
+		<div id="box">
+			<div class="jiange">
+				<p> <b>word-spacing : 控制每个单词之间的间距</b></p>
+			</div>
+			<p class="spread">This is some text . this is some text </p>
+			<p class="tight">This is some text . this is some text </p>
+		</div>
+
+		<div id="box">
+			<p><b>letter-spacing：控制每个字母之间的间距</b></p>
+			<p class="one">this is heading 1</p>
+			<p class="two">this id heading 2</p>
+		</div>
+
+	</body>
+</html>
diff --git "a/\344\275\231\344\274\240\345\245\225/20211119-RGB/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211119-RGB/demo01.html"
new file mode 100644
index 0000000..b2631f7
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211119-RGB/demo01.html"
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+				--red: 108;
+				--green: 87;
+				--blue: 106;
+				--threshold: 0.5;
+				--border-threshold: 0.8;
+			}
+
+			.btn {
+				font-size: 150%;
+				padding: .5em 2em;
+				width: 180px;
+				height: 45px;
+				text-align: center;
+				margin: 0px auto;
+			}
+
+			.btn {
+				background: rgb(var(--red), var(--green), var(--blue));
+				--r: calc(var(--red) * 0.2126);
+				--g: calc(var(--green) * 0.7152);
+				--b: calc(var(--blue) * 0.0722);
+				--sum: calc(var(--r) + var(--g) + var(--b));
+
+				--lightness: calc(var(--sum) / 255);
+				color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
+				--border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
+				border: .2em solid;
+				border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
+			}
+
+			.a {
+				color: red;
+				text-align: center;
+			}
+
+			.b {
+				color: green;
+				text-align: center;
+			}
+
+			.c {
+				color: blue;
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="btn">颜色属性值</div>
+		<p class="a"><input type="range" min="0" max="255" value="108" name="red"><br>R</p>
+		<p class="b"><input type="range" min="0" max="255" value="87" name="green"><br>G</p>
+		<p class="c"><input type="range" min="0" max="255" value="106" name="blue"><br>B</p>
+		<script type="text/javascript">
+			var eleRanges = document.querySelectorAll('input[type="range"]');
+			Array.from(eleRanges).forEach(function(range) {
+				range.addEventListener('input', function() {
+					document.documentElement.style.setProperty('--' + this.name, this.value);
+				});
+			});
+		</script>
+	</body>
+</html>
diff --git "a/\344\275\231\344\274\240\345\245\225/20211124-flex\351\252\260\345\255\220/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211124-flex\351\252\260\345\255\220/demo01.html"
new file mode 100644
index 0000000..f01fd6c
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211124-flex\351\252\260\345\255\220/demo01.html"
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			body {
+				background-color: #333;
+			}
+
+			.item {
+				width: 24px;
+				height: 24px;
+				border-radius: 50%;
+				padding: 4px;
+				background-color: #333;
+				box-shadow: inset 0 3px #111,
+					inset 0 -3px #555;
+			}
+
+			.faceone {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.facetwo {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				justify-content: space-between;
+			}
+
+			.facetwo .item:nth-of-type(2) {
+				align-self: flex-end;
+			}
+
+			.facethree {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				justify-content: space-between;
+			}
+
+			.facethree .item:nth-of-type(2) {
+				align-self: center;
+			}
+
+			.facethree .item:nth-of-type(3) {
+				align-self: flex-end;
+			}
+
+			.facefour {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				flex-wrap: wrap;
+				align-content: space-between;
+			}
+
+			.row {
+				display: flex;
+				flex-basis: 100%;
+				justify-content: space-between;
+			}
+
+			.facefive {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+			}
+
+			.facefive .row {
+				justify-content: space-around;
+				flex-direction: column;
+				align-items: center;
+			}
+
+			.facesix {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				flex-wrap: wrap;
+				align-content: space-between;
+			}
+			
+			.nine {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				align-content: space-between;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="faceone">
+			<div class="item"></div>
+		</div>
+		<div class="facetwo">
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="facethree">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="facefour">
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+		</div>
+		<div class="facefive">
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+		</div>
+		<div class="facesix">
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+		</div>
+		<div class="nine">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+	</body>
+</html>
diff --git "a/\344\275\231\344\274\240\345\245\225/20211125-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211125-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo01.html"
new file mode 100644
index 0000000..e222f27
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211125-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo01.html"
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			.item {
+				width: 20px;
+				height: 20px;
+				border-radius: 50%;
+				background-color: red;
+			}
+
+			.f1,
+			.f2,
+			.f3,
+			.f4,
+			.f5
+				{
+				display: grid;
+				width: 100px;
+				height: 100px;
+				margin: 10px;
+				border: 1px solid #000;
+				border-radius: 10px;
+				justify-items: center;
+				align-items: center;
+				grid-template:
+					"a1 a2 a3"1fr "a4 a5 a6"1fr "a7 a8 a9"1fr;
+			}
+
+			.f1 div {
+				grid-area: a5;
+			}
+
+			.f2 div:nth-of-type(2) {
+				grid-area: a9;
+			}
+
+			.f3 div:nth-of-type(2) {
+				grid-area: a5;
+			}
+
+			.f3 div:nth-of-type(3) {
+				grid-area: a9;
+			}
+
+			.f4 div:nth-of-type(2) {
+				grid-area: a3;
+			}
+
+			.f4 div:nth-of-type(3) {
+				grid-area: a7;
+			}
+
+			.f4 div:nth-of-type(4) {
+				grid-area: a9;
+			}
+
+			.f5 div:nth-of-type(2) {
+				grid-area: a3;
+			}
+
+			.f5 div:nth-of-type(3) {
+				grid-area: a5;
+			}
+
+			.f5 div:nth-of-type(4) {
+				grid-area: a7;
+			}
+
+			.f5 div:nth-of-type(5) {
+				grid-area: a9;
+			}
+			
+			.f6 {
+				display: grid;
+				width: 100px;
+				height: 100px;
+				margin: 10px;
+				border: 1px solid #000;
+				border-radius: 10px;
+				justify-items: center;
+				align-items: center;
+				grid-template:
+					"a1 a2" 1fr
+					"a3 a4" 1fr
+					"a5 a6" 1fr
+			}
+		</style>
+	</head>
+	<body>
+		<div class="f1">
+			<div class="item"></div>
+		</div>
+		<div class="f2">
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="f3">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="f4">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="f5">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="f6">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+	</body>
+</html>
diff --git "a/\344\275\231\344\274\240\345\245\225/20211125-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo02.html" "b/\344\275\231\344\274\240\345\245\225/20211125-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo02.html"
new file mode 100644
index 0000000..11bd2e3
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211125-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo02.html"
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style>
+			.container {
+				display: grid;
+				width: 400px;
+				height: 400px;
+				grid-template-rows: repeat(2, 20%);
+
+			}
+
+			.box1 {
+				display: grid;
+				grid-template-columns: repeat(2, 50%);
+			}
+
+			.box2 {
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+			}
+
+			.box3 {
+				display: grid;
+				grid-template-columns: repeat(4, 1fr);
+				grid-template-rows: repeat(3, 1fr);
+				grid-template-areas: 'a b c d'
+					'A A B B'
+					'A A B B';
+			}
+
+			.item {
+				font-size: 3em;
+				color: #fff;
+			}
+
+			.fifty1 {
+				background-color: red;
+
+			}
+
+			.fifty2 {
+				background-color: green;
+
+			}
+
+			.thirty1 {
+				background-color: #008080;
+
+			}
+
+			.thirty2 {
+				background-color: yellow;
+			}
+
+			.thirty3 {
+				background-color: #FFD700;
+			}
+
+			.twentyfive1 {
+				background-color: pink;
+
+			}
+
+			.twentyfive2 {
+				background-color: purple;
+
+			}
+
+			.twentyfive3 {
+				background-color: blue;
+
+			}
+
+			.twentyfive4 {
+				background-color: black;
+
+			}
+
+			.fifty3 {
+				background-color: red;
+				grid-area: A;
+			}
+
+			.fifty4 {
+				background-color: green;
+				grid-area: B;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="container">
+			<div class="box1">
+				<div class="item fifty1">50%</div>
+				<div class="item fifty2">50%</div>
+			</div>
+			<div class="box2">
+				<div class="item thirty1">33%</div>
+				<div class="item thirty2">33%</div>
+				<div class="item thirty3">33%</div>
+			</div>
+			<div class="box3">
+				<div class="item twentyfive1">25%</div>
+				<div class="item twentyfive2">25%</div>
+				<div class="item twentyfive3">25%</div>
+				<div class="item twentyfive4">25%</div>
+				<div class="item fifty3">50%</div>
+				<div class="item fifty4">50%</div>
+			</div>
+
+		</div>
+	</body>
+
+</html>
diff --git "a/\344\275\231\344\274\240\345\245\225/20211126-transform\346\227\266\351\222\237/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211126-transform\346\227\266\351\222\237/demo01.html"
new file mode 100644
index 0000000..d241195
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211126-transform\346\227\266\351\222\237/demo01.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 #cccccc;
+				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: #fff;
+			}
+
+			.needle {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -100%);
+			}
+
+			.hour {
+				width: 10px;
+				height: 70px;
+				background-color: green;
+				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: red;
+				border-radius: 2px;
+				transform-origin: center bottom;
+				animation: clock 60s linear infinite;
+			}
+
+			.cir {
+				width: 20px;
+				height: 20px;
+				background-color: black;
+			}
+
+			@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>
-- 
Gitee

