太极图实现起来很简单，就是把多个标签利用border-radius设置成圆形，然后多个圆利用position定位重叠在一起
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4<meta charset="utf-8"> 5<title>太极图</title> 6<style type="text/css"> 7 * {8 margin: 0; 9 padding: 0;10 }11 .circlebox {12 width: 300px;13 height: 300px;14 margin: 100px auto;15 position: relative;16 animation: move 2s linear infinite;17 }18 .circleblack {19 width: 300px;20 height: 300px;21 background-color: black;22 border-radius: 50%;23 }24 .circlewhite {25 width: 150px;26 height: 300px;27 background-color: white;28 border-top-right-radius: 150px;29 border-bottom-right-radius: 150px;30 position: absolute;31 top: 0;32 right: 0;33 }34 .circlebb {35 width: 150px;36 height: 150px;37 background: black;38 border-radius: 50%;39 position: absolute;40 top: 0;41 left: 75px;42 }43 .circleww {44 width: 150px;45 height: 150px;46 background: white;47 border-radius: 50%;48 position: absolute;49 bottom: 0;50 left: 75px;51 }52 .circlebbl {53 width: 40px;54 height: 40px;55 background: black;56 position: absolute;57 bottom: 55px;58 left: 130px;59 border-radius: 50%;60 }61 .circlewwl {62 width: 40px;63 height: 40px;64 background: #fff;65 position: absolute;66 top: 55px;67 left: 130px;68 border-radius: 50%;69 }70 @keyframes move {71 from {transform: rotate(0deg);}72 to {transform: rotate(360deg);}73 }74</style>75 </head>76 <body>77<div class="circlebox">78 <div class="circleblack"></div>79 <div class="circlewhite"></div>80 <div class="circlebb"></div>81 <div class="circleww"></div>82 <div class="circlebbl"></div>83 <div class="circlewwl"></div>84</div>85 </body>86 </html>
