自己用css实现的自转动的太极，就当留个纪念。
用css实现太极有很多种实现方法，我这种大概是最简单的了吧，因为div用得太多了，哈哈。
高级一点的应该是用伪类:before和:after去减少div的用量。
当然了，我知道是因为我也用伪类来实现过太极，只是说当初写的源码找不到了，找了一下找不到就放弃了。
就像人生一样，有些东西丢了就再也找不回来了。也或许可以找回来，但是已经没有找回来的必要了。
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>太极</title> <style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
}
.taiji {
width: 400px;
height: 400px;
border: 1px solid black;
border-radius: 50%;
animation: spin 6s linear infinite;
position: relative;
margin: 100px auto;
}
.taiji_half {
width: 200px;
height: 400px;
position: absolute;
}
.taiji_half_black {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
background: black;
}
.taiji_half_white {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background: white;
left: 200px;
}
.taiji_circle_big {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 100px;
}
.taiji_circle_big_black {
background: black;
}
.taiji_circle_big_white {
background: white;
top: 200px;
}
.taiji_circle_small {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 75px;
top: 75px;
}
.taiji_circle_small_white {
background: white;
}
.taiji_circle_small_black {
background: black;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="taiji">
<div class="taiji_half taiji_half_black"></div>
<div class="taiji_half taiji_half_white"></div>
<div class="taiji_circle_big taiji_circle_big_black">
<div class="taiji_circle_small taiji_circle_small_white"></div>
</div>
<div class="taiji_circle_big taiji_circle_big_white">
<div class="taiji_circle_small taiji_circle_small_black"></div>
</div>
</div>
</body>
</html>
内容很简单，就这些了。
难点的话应该主要在【居中】和【圆角】上，要弄懂其实也不难。
今天在整理电脑文件的时候无意中整理出来的，所以想保存一下，只是突然觉得时间真的是令人猝不及防的东西。
"高中时一个同学沉迷网络，时常半夜翻墙出校上网。一夜他照例翻墙，只是翻到一半就拔足狂奔而归，面色古怪，问之不语。从此认真读书，不再上网，学校盛传他见鬼了。后来他考上了名校，再问此事的时候，他沉默良久之后终于开口，那天父亲来送生活费，舍不得住旅馆，在墙下坐了一夜。"