案例-旋转的太极图案(HTML+CSS)

2023-12-30 10:29:43

使用css的动画变换效果完成“?旋转太极“。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				background-color: antiquewhite;
			}
			.tj{
				width: 0;
				height: 300px;
				/* border: 1px solid red; */
				border-left: 150px solid #000000;
				border-right: 150px solid #FFFFFF;
				border-radius: 50%;
				animation: myAnimation 3s linear 0s infinite;
			}
			@keyframes myAnimation {
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			
			.tj::before , .tj::after{
				display: block;
				content: "";
				background: white;
				height: 50px;
				width: 50px;
				border-radius: 50%;
				border: 50px solid black;
				margin-left: -72px;
			}
			.tj::after {
				background: black;
				border: 50px solid white;
			}
		</style>
	</head>
	<body>
		<div class="tj"></div>
	</body>
</html>

实现效果：

文章来源:https://blog.csdn.net/weixin_68256171/article/details/135302303
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。