CSS3教程

当前位置: HTML5技术网 > CSS3教程 > css3简单几步画一个乾坤图

css3简单几步画一个乾坤图



效果如上,鼠标移上去会有动画。
代码如下非常简单:


  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.     .dqk{position:absolute;top:0px;left:0px;}
  14.     .qk1{transition:300ms;}
  15. </style>
  16. </head>
  17. <body>
  18.     <table style="width:100%;height:100%;">
  19.         <tr><td>
  20.             
  21.             <div class="outp">
  22.             <div class="dqk">
  23.                 <div class="outer">
  24.                     <div class="inner">
  25.                         <div  class="inner1"></div>
  26.                     </div>
  27.                 </div>
  28.                 <div class="outer reversal" >
  29.                     <div class="inner">
  30.                         <div  class="inner1"></div>
  31.                     </div>
  32.                 </div>
  33.             </div>

  34.             <div class="dqk qk1">
  35.                 <div class="outer">
  36.                     <div class="inner">
  37.                         <div  class="inner1"></div>
  38.                     </div>
  39.                 </div>
  40.                 <div class="outer reversal" >
  41.                     <div class="inner">
  42.                         <div  class="inner1"></div>
  43.                     </div>
  44.                 </div>
  45.             </div>

  46.             </div>
  47.         </td></tr>
  48.     </table>
  49. </body>
  50. </html>
复制代码

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



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



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


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




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





【css3简单几步画一个乾坤图】相关文章

1. css3简单几步画一个乾坤图

2. 简单几步,让你的网站兼容IE10(1)

3. 简单几步,让你的网站兼容IE10(2)

4. 简单几步,让你的网站兼容IE10(3)

5. 用HTML5画一个3D的三角形网格

6. 一个简单的CSS3文字动画插件textillate

7. 通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用

8. 利用HTML5与jQuery技术创建一个简单的自动表单完成

9. 一个简单的冻结HTML表格标题jQuery插件Freezeheader

10. 利用HTML5与jQuery技术创建一个简单的自动表单完成

本文来源:https://www.51html5.com/a1047.html

点击展开全部

﹝css3简单几步画一个乾坤图﹞相关内容

「css3简单几步画一个乾坤图」相关专题

其它栏目

也许您还喜欢