CSS_旋转太极

最新推荐文章于 2024-08-13 09:19:18 发布

PPDY小芽

最新推荐文章于 2024-08-13 09:19:18 发布

阅读量98

点赞数

文章标签： css html css3 animation html5

本文链接：https://blog.csdn.net/PPDY93/article/details/112433115

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: burlywood;
			}
			@keyframes TaiJirotate{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.TaiJi{
				width: 0px;
				height: 300px;
				border-radius: 50%;
				border-left: 150px solid white ;
				border-right: 150px solid black;
				animation: TaiJirotate 3s linear infinite;
			}
			.TaiJi::before{
				border: 50px solid black;
				width: 50px;
				height: 50px;
				content:"";
				display: block;
				border-radius: 50%;
				margin-left: -75px;
				background-color:white;
			}
			.TaiJi::after{
				border: 50px solid white;
				width: 50px;
				height: 50px;
				content:"";
				display: block;
				border-radius: 50%;
				margin-left: -75px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="TaiJi"></div>
	</body>
</html>