|
|
效果如上，鼠標移上去會有動畫。
代碼如下非常簡單：
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>
步驟就四步：
1:先寫半邊,再復制一份在它下面
2：把下面半邊旋轉180度，transform:rotate(180deg);
3:把下面半邊反色，可以使用css3的反色：-webkit-filter:invert(1); 但是目前只有webkit的內核支持了，所以還是自己寫css設置background吧
4:接着再復制一份完整的乾坤圖，要注意疊在一起，然后設置一個動畫就好了，我這里的動畫是放大+透明transform:scale(1.5) rotate(180deg);
好了，這就寫完了。我為什么畫乾坤圖呢，是因為我名字里面有個坤咯。
哈哈，應該是端午節閑的。