太极图HTML+CSS（可旋转）

weixin_40691332

于 2024-07-21 02:47:10 发布

阅读量38

点赞数

文章标签： html css 前端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>太极旋转图</title>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				width: 200px;
				height: 100px;
				margin: 50px auto;
				/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/
				border-width: 1px 1px 100px 1px;
				border-style: solid;
				border-radius: 50%;
				position: relative;
			}
			.left{
				position: absolute;
				top: 50%;
				width: 20px;
				height: 20px;
				background-color: #fff;
				border: 40px solid #000;
				border-radius: 50%;
			}
			.right{
				/*当设置绝对定位时，如果没有参考物（相对定位），
				 * 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*/
				/*相对定位其实就是相对参考物:父相子绝*/
				position: absolute;
				top: 50%;
				/*left: 100px;*/
				right: 0px;
				width: 20px;
				height: 20px;
				background-color: #000;
				border: 40px solid #fff;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

第二种方式：

用一个div实现（伪元素），性能更好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>太极旋转图</title>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				width: 200px;
				height: 100px;
				margin: 50px auto;
				/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/
				border-width: 1px 1px 100px 1px;
				border-style: solid;
				border-radius: 50%;
				position: relative;
			}
			.wrap:before{
				content: '';/*激活伪元素的必要因素*/
				position: absolute;
				top: 50%;
				width: 20px;
				height: 20px;
				background-color: #fff;
				border: 40px solid #000;
				border-radius: 50%;
			}
			.wrap:after{
				content: '';/*激活伪元素的必要因素*/
				/*当设置绝对定位时，如果没有参考物（相对定位），
				 * 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*/
				/*相对定位其实就是相对参考物:父相子绝*/
				position: absolute;
				top: 50%;
				/*left: 100px;*/
				right: 0px;
				width: 20px;
				height: 20px;
				background-color: #000;
				border: 40px solid #fff;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>

第二个方法中，再简洁一点：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>太极旋转图</title>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				width: 200px;
				height: 100px;
				margin: 50px auto;
				/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/
				border-width: 1px 1px 100px 1px;
				border-style: solid;
				border-radius: 50%;
				position: relative;
			}
			.wrap:before,
			.wrap:after{
				content: '';/*激活伪元素的必要因素*/
				position: absolute;
				top: 50%;
				width: 20px;
				height: 20px;
				border-radius: 50%;
			}
			.wrap:before{
				background-color: #fff;
				border: 40px solid #000;
			}
			.wrap:after{
				/*当设置绝对定位时，如果没有参考物（相对定位），
				 * 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*/
				/*相对定位其实就是相对参考物:父相子绝*/
				right: 0px;
				background-color: #000;
				border: 40px solid #fff;
				}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>

接下来就需要这个太极旋转起来，这时就需要CSS中的动画属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>太极旋转图</title>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				width: 200px;
				height: 100px;
				margin: 50px auto;
				/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/
				border-width: 1px 1px 100px 1px;
				border-style: solid;
				border-radius: 50%;
				position: relative;
				/*通过属性去调用之前定义好的动画*/
				animation: rote 1s linear infinite;
				/*rote 就是这个动画的名称*/
				/*2s 表示做一次这个动画需要2s时间 决定旋转的快慢*/
				/*linear 表示匀速的旋转*/
				/*infinite 表示永久旋转*/
			}
			.wrap:before,
			.wrap:after{
				content: '';/*激活伪元素的必要因素*/
				position: absolute;
				top: 50%;
				width: 20px;
				height: 20px;
				border-radius: 50%;
			}
			.wrap:before{
				background-color: #fff;
				border: 40px solid #000;
			}
			.wrap:after{
				/*当设置绝对定位时，如果没有参考物（相对定位），
				 * 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*/
				/*相对定位其实就是相对参考物:父相子绝*/
				right: 0px;
				background-color: #000;
				border: 40px solid #fff;
				}
				/*定义CSS动画*/
				@keyframes rote{
					from{
						transform: rotate(0deg);/*旋转*/
					}
					to{
						transform: rotate(360deg);/*旋转*/
					}
				}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>