html实现太极图效果 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阴阳</title>
	<style>
		
		.yinyang {
			width: 200px;
			height: 99px;
			border:1px solid #000;
			border-bottom-width: 100px;
			border-radius: 100px;
			position: relative;
			cursor: pointer;
			transition: 100s;
		}

		.yinyang:hover {
			/*旋转*/
			transform: rotate(200000deg);
		}

		
		.yinyang:before {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
			border:40px solid #000;
			left: 0;
			top: 50px;
			border-radius: 50px;
			background: #fff;
		}

		.yinyang:after {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
			border:40px solid #fff;
			right: 0;
			top: 50px;
			border-radius: 50px;
			background: #000;
		}
	</style>
</head>
<body>

	<div class="yinyang"></div>

</body>
</html>

 

posted @ 2022-10-12 20:56  JackieDYH  阅读(16)  评论(0)  编辑  收藏  举报  来源