最近在学前端的相关知识，里面有一个太极图的案例，感觉挺有意思的。自己完成后又加了点JS特效让太极图转起来。
可能有点low，但对于初学前端的我来说也是一个阶段性成就，于是决定在博客园的公告栏把这个旋转的太极图挂一段时间。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太极图</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightgray;
}
#tjt {
height: 200px;
200px;
border-radius: 50%;
border: 1px black solid;
position: relative;
box-shadow: 0px 0px 30px 5px gold;
z-index: 100;
margin: 100px auto;
}
#tjt>div {
height: 50%;
100%;
}
#up {
background-color: white;
border-radius: 100% 100% 0 0 / 200% 200% 0 0;
}
#down {
background-color: black;
border-radius: 0 0 100% 100% / 0 0 200% 200%;
}
#up::before {
content: "";
display: block;
background-color: black;
box-sizing: border-box;
height: 50%;
50%;
position: absolute;
left: 0;
top: 25%;
border: 33.3px white solid;
border-radius: 50%;
}
#down::after {
content: "";
display: block;
background-color: white;
box-sizing: border-box;
height: 50%;
50%;
position: absolute;
left: 50%;
top: 25%;
border: 33.3px black solid;
border-radius: 50%;
}
</style>
<script>
window.onload = function () {
setInterval(function () {
let data = document.getElementById("tjt").style.transform;
let deg = parseInt(data.slice(data.indexOf('(') + 1));
document.getElementById("tjt").style.transform =
"rotate(" + (deg + -30) + "deg)";
document.getElementById("tjt").style.transition = '0.1s linear'
}
, 100);
}
</script>
</head>
<body>
<div id="tjt" style="transform: rotate(0deg);">
<div id="up"></div>
<div id="down"></div>
</div>
</body>
</html>
好像用CSS做太极图在学校的时候老师也当案例讲过，不记得了