太极图HTML+CSS（可旋转）

最新推荐文章于 2023-02-07 12:11:31 发布

懒羊羊♛

最新推荐文章于 2023-02-07 12:11:31 发布

阅读量823

点赞数 3

分类专栏： HTML+CSS+JavaScript 文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_46596213/article/details/110352252

版权

HTML+CSS+JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

懒羊羊♛

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
太极图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: 5
复制链接

扫一扫