HTML5--使用CSS3制作动态太极

最新推荐文章于 2023-11-22 00:01:17 发布

飞鸿影梦

最新推荐文章于 2023-11-22 00:01:17 发布

阅读量491

点赞数

本文链接：https://blog.csdn.net/weixin_43379235/article/details/107284427

版权

1. 效果展示：
在这里插入图片描述
2. 代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS3制作太极</title>
	<style>
		.taiji{
			animation: taiji 10s infinite ease ;
			width: 100px;height: 200px;
			background-color: #f00;
			border-right: 100px solid #000;
			margin: 30px auto;
			position: relative;
			border-radius: 50%
			}
		.taiji:before{
		 content: "";
		 width: 20px;height: 20px;
		 border: 40px solid #f00;
		 background-color:#000;
		 position: absolute;
		 left: 50%;
		 border-radius: 50%
		 }
		.taiji:after{
		 content: "";
		 width: 20px;height: 20px;
		 border: 40px solid #000;
		 background-color:#f00;
		 position: absolute;
		 left: 50%;
		 top: 50%;
		 border-radius: 50%
		}
		@keyframes taiji{
			0%{transform: rotate(0deg)}
			100%{transform: rotate(360deg)}
		}
	</style>
</head>

<body>
	<div class="taiji"></div>
</body>
</html>