css3简单几步画一个乾坤图

浏览数：29 / 时间：2015年06月09日

效果如上，鼠标移上去会有动画。

代码如下非常简单：

 1 <html>
 2 <head>
 3 <style>
 4     .outer{height:100px;width:200px;border-radius:100px 100px 0px 0px;border:solid 1px #666;border-bottom:none; margin:0 auto;background:#fff;overflow:hidden;}
 5     .inner{width:300px;height:100px;border-radius:50px 0px 0px 50px;margin-left:50px;background:#000;}
 6     .inner1{width:10px;height:10px;border-radius:5px;background:#fff;margin:30px 0px 0px 45px;float:left;}
 7     .reversal{background:#000;-webkit-transform:rotate(180deg);transform:rotate(180deg);/*-webkit-filter:invert(1);*/}
 8     .reversal .inner{background:#fff;}
 9     .reversal .inner1{background:#000;}
10     
11     .outp{position:relative;margin:0 auto;width:200px;height:200px;}
12     .outp:hover .qk1{-webkit-transform:scale(1.5) rotate(180deg);transform:scale(1.5) rotate(180deg);opacity:0;}
13 
14     .dqk{position:absolute;top:0px;left:0px;}
15     .qk1{transition:300ms;}
16 </style>
17 </head>
18 <body>
19     <table style="width:100%;height:100%;">
20         <tr><td>
21             
22             <div class="outp">
23             <div class="dqk">
24                 <div class="outer">
25                     <div class="inner">
26                         <div  class="inner1"></div>
27                     </div>
28                 </div>
29                 <div class="outer reversal" >
30                     <div class="inner">
31                         <div  class="inner1"></div>
32                     </div>
33                 </div>
34             </div>
35 
36             <div class="dqk qk1">
37                 <div class="outer">
38                     <div class="inner">
39                         <div  class="inner1"></div>
40                     </div>
41                 </div>
42                 <div class="outer reversal" >
43                     <div class="inner">
44                         <div  class="inner1"></div>
45                     </div>
46                 </div>
47             </div>
48 
49             </div>
50         </td></tr>
51     </table>
52 </body>
53 </html>