html 太极图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		body{background-color: darkgray;}
		.taiji{
			margin: 100px auto;
			position: relative;
			width: 300px;
			height: 300px;
			border-radius: 50%;
			border: solid 1px #ccc;
			animation: spin 6s linear infinite;
		}
		.tj{
			width: 50%;
			height: 100%;
			position: absolute;
			top: 0;
		}
		.white{
			background-color: white;
			left: 0;
			border-radius: 100% 0 0 100%/50% 0 0 50%;
		}
		.black{
			background-color: black;
			right: 0;
			border-radius: 0 100% 100% 0/0 50% 50% 0;
		}
		.round{
			width: 50%;
			height: 50%;
			border-radius: 50%;
			position: absolute;
		}
		.r-w{
			background-color: white;
			top: 0;
			left: 25%;
		}
		.r-b{
			background-color: black;
			bottom: 0;
			left: 25%;
		}
		.small{
			width: 25%;
			height: 25%;
			border-radius: 50%;
			position: absolute;
			left: 37.5%;
		}
		.s-b{
			background-color: black;
			top: 37.5%;
		}
		.s-w{
			background-color: white;
			bottom: 37.5%;
		}
		@keyframes spin{
			0%{
				transform: routate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
	</style>
	<body>
		<div class="taiji">
			<div class="tj white"></div>
			<div class="tj black"></div>
			<div class="round r-w">
				<div class="small s-b"></div>
			</div>
			<div class="round r-b">
				<div class="small s-w"></div>
			</div>
		</div>
	</body>
</html>

温馨提示：本文最后更新于2023-12-16 09:32:05，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长。

本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！

分享是一种美德，当你分享时请你附带上本文链接。

THE END