[原创]css3简单几步画一个乾坤图

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

代码如下非常简单：

 <html>

 <head>

 <style>

     .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;}

     .inner{width:300px;height:100px;border-radius:50px 0px 0px 50px;margin-left:50px;background:#000;}

     .inner1{width:10px;height:10px;border-radius:5px;background:#fff;margin:30px 0px 0px 45px;float:left;}

     .reversal{background:#000;-webkit-transform:rotate(180deg);transform:rotate(180deg);/*-webkit-filter:invert(1);*/}

     .reversal .inner{background:#fff;}

     .reversal .inner1{background:#000;}

     .outp{position:relative;margin:0 auto;width:200px;height:200px;}

     .outp:hover .qk1{-webkit-transform:scale(1.5) rotate(180deg);transform:scale(1.5) rotate(180deg);opacity:0;}

     .dqk{position:absolute;top:0px;left:0px;}

     .qk1{transition:300ms;}

 </style>

 </head>

 <body>

     <table style="width:100%;height:100%;">

         <tr><td>

             <div class="outp">

             <div class="dqk">

                 <div class="outer">

                     <div class="inner">

                         <div  class="inner1"></div>

                     </div>

                 </div>

                 <div class="outer reversal" >

                     <div class="inner">

                         <div  class="inner1"></div>

                     </div>

                 </div>

             </div>

             <div class="dqk qk1">

                 <div class="outer">

                     <div class="inner">

                         <div  class="inner1"></div>

                     </div>

                 </div>

                 <div class="outer reversal" >

                     <div class="inner">

                         <div  class="inner1"></div>

                     </div>

                 </div>

             </div>

             </div>

         </td></tr>

     </table>

 </body>

 </html>

步骤就四步：

1:先写半边,再复制一份在它下面

[原创]css3简单几步画一个乾坤图-LMLPHP

2：把下面半边旋转180度，transform:rotate(180deg);

[原创]css3简单几步画一个乾坤图-LMLPHP

3:把下面半边反色，可以使用css3的反色：-webkit-filter:invert(1); 但是目前只有webkit的内核支持了，所以还是自己写css设置background吧

4:接着再复制一份完整的乾坤图，要注意叠在一起，然后设置一个动画就好了，我这里的动画是放大+透明transform:scale(1.5) rotate(180deg);

[原创]css3简单几步画一个乾坤图-LMLPHP

好了，这就写完了。我为什么画乾坤图呢，是因为我名字里面有个坤咯。

哈哈，应该是端午节闲的。