太极图实现起来很简单,就是把多个标签利用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>
CSS3之太极图源代码
原文地址:https://www.cnblogs.com/znh8/p/9383090.html