原文:[原创]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:先写半边,再复制一份在它下面

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

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

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

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

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

css3简单几步画一个乾坤图的更多相关文章

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

    效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{height:100px;width:200px;bo ...

  2. 如何用Apache POI操作Excel文件-----如何用Apache POI 画一个离散图

    有的时候,我们需要Excel中的数据,通过一个图画,可视化的表现出来. 那么这个时候,应该如何做呢?现在就借花献佛,以Apache POI自己提供的一个例子为例,给大家演示一下POI的API 如何画图 ...

  3. 使用starUML一步一步画顺序图

    顺序图:是UML中能表现出一个过程中各个详细步骤的模型图,过程可以理解为一个功能的执行过程. 下面我们以一个简单的影院管理系统中售票功能为例来一步一步完成顺序图的构建. 建模工具:starUML 版本 ...

  4. 四步轻松实现用Visio画UML类图

    本节和大家一起学习一下用Visio画UML类图的方法,主要有四个步骤,这里和大家分享一下,相信通过本节的学习,你对Visio画UML类图的步骤一定会有所了解. 用Visio画UML类图 对于画类图的工 ...

  5. Directx11学习笔记【十一】 画一个简单的三角形--effect框架的使用

    这里不再介绍effect框架的具体使用,有关effect框架使用可参考http://www.cnblogs.com/zhangbaochong/p/5475961.html 实现的功能依然是画一个简单 ...

  6. 手对手的教你用canvas画一个简单的海报

    啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信.qq等平台.图片中包含用户的姓名.头像.和带着自己信息的二维码.然后,如何生成这张海报呢~~~首先我们老大告诉我有一个插件叫htm ...

  7. PostScript的简单例子-用粗线画一个圆

    一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...

  8. 一步一步写一个简单通用的makefile(三)

    上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...

  9. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

随机推荐

  1. Codeforces 474 E. Pillars

    水太...... E. Pillars time limit per test 1 second memory limit per test 256 megabytes input standard ...

  2. JDBC连接数据库 prepareStatement

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  3. GotoTest

    循环标签跳出循环 public class GotoTest { public static void main(String[] args) { int[][] array={ {1,20,3}, ...

  4. ListView的操作模式的选择的更详细的解释CHOICE_MODE_MULTIPLE与CHOICE_MODE_MULTIPLE_MODAL

    本文介绍了我们将如何取得具体ListView多选择操作.本文将正确使用ListViewCHOICE_MODE_MULTIPLE要么CHOICE_MODE_MULTIPLE_MODAL时间easy误区. ...

  5. POJ 3009-Curling 2.0（DFS）

    Curling 2.0 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12158   Accepted: 5125 Desc ...

  6. 解决Virtual Box 安装Mac OS X当出现“hfs: summary table not allowed on FS with block size of 2048”问题

    解决Virtual Box 安装Mac OS X当出现"hfs: summary table not allowed on FS with block size of 2048"问 ...

  7. 如何ios中间Safari在开发了类似的native app像全屏webapp

    本文交换了我www.gbtags.com文章. <meta name="format-detection" content="telephone=no email= ...

  8. android file.createnewfile ioexception

    近期在写项目的时候,文件有时候能创建成功有时候直接io异常,真是太扯淡.找了许久,最终找到原因 android 中创建文件,文件的名字中不能包括冒号啊这种特殊字符, 仅仅要你感觉有点特殊的字符最好都不 ...

  9. 一个简单的Java死锁示例（转）

    在实际编程中,要尽量避免出现死锁的情况,但是让你故意写一个死锁的程序时似乎也不太简单(有公司会出这样的面试题),以下是一个简单的死锁例子,程序说明都写着类的注释里了,有点罗嗦,但是应该也还是表述清楚了 ...

  10. 例如找出令人信服的权威C++中间malloc与new

    例如找出令人信服的权威C++中间malloc与new 问题: 非常多人都知道malloc与new都是用来申请空间用的,开辟空间来源于堆中. 可是在C++中却非常少用malloc去申请空间,为什么? 以 ...