css实例——太极八卦图

最新推荐文章于 2024-07-22 16:31:07 发布

置顶 Stray Pointers

最新推荐文章于 2024-07-22 16:31:07 发布

阅读量896

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/xiao_jie_jie1/article/details/106972789

前端专栏收录该内容

1 篇文章

订阅专栏

css实例——太极八卦图

分析：

可以看成是三个类型的圆组成，分别是大的圆，中等大小的圆，小的圆。这是一个整体的思路，具体的话就是去调整各个圆的位置

HTML代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>太极八卦图案例</title>
		<link rel="stylesheet" type="text/css" href="buguaStyle.css" />
	</head>
	<body>
		<div class="background">	<!--主要是用到了定位，还有动画 -->
			<div class="box">
				<div class="Black"></div>
				<div class="White"></div>
				<div class="medium_black"></div>
				<div class="medium_white"></div>
				<div class="little_black"></div>
				<div class="little_white"></div>
			</div>
		</div>
	</body>
</html>

css代码部分:

*{	/*css代码上来必须写的*/
	padding: 0;
	margin: 0;
	list-style: none;
}
.background{
	width: 100%;
	height: 100%;
	background: darkgray;
	position: fixed;
	/*定位  ->	absolute(生成绝对定位元素，相对于父级元素进行定位)
				fixed（生成绝对定位元素，相对于浏览器窗口进行定位）
				relative（生成相对定位元素，相对于其正常位置进行定位）*/
}
.box{
	width: 400px;
	height: 400px;
	border-radius:50%;
	position: absolute;	/*因为父级元素有了定位，所以这里用absolute*/
	top: 0;				/*上、下、左、右四个属性值来实现元素位置的改变*/
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation:run 5s infinite linear;
}
.Black{
	width: 200px;
	height: 400px;
	background: black;
	border-radius: 200px 0 0 200px;		/*形成一个黑色的左半圆*/
	position: absolute;
} 
.White{
	width: 200px;
	height: 400px;
	background: white;
	border-radius:0 200px 200px 0;		/*形成一个白色的左半圆*/
	left: 200px;
	position: absolute;
}
.medium_black{
	width: 200px;
	height: 200px;
	background: black;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 0;	/*四个属性实现了中等大小的圆在最xia边的中间的位置*/
}
.medium_white{
	width: 200px;
	height: 200px;
	background: white;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;	/*这个可以写也可以不写，因为是这个默认是在左上角的，写了上边三个属性后就己经能达到想要的效果了*/
}
.little_black{
	width: 100px;
	height: 100px;
	background: black;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 50px;
}
.little_white{
	width: 100px;
	height: 100px;
	background: white;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 50px;
}
@keyframes run{
	from{
		transform: rotate(0deg);/*这里不写也是可以的，因为默认的话就是0*/
	}
	to{
		transform: rotate(360deg);
	}
}

![这个只是静态的截图效果](https://img-blog.csdnimg.cn/20200626175718694.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9famllX2ppZTE=,size_16,color_FFFFFF,t_70#pic_center)