CSS3之太极图源代码 

　　太极图实现起来很简单，就是把多个标签利用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>

 

posted on 2018-07-28 19:09  糖糖大大  阅读(3170)  评论(0)    收藏  举报

导航