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

代码如下非常简单：

 <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简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

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

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

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

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

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

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

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

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

  6. 如何用latex画一个简单的表格

    latex毫无疑问是一个十分强大的论文写作工具,所以掌握它就显得非常有意义,讲一下如何画一个简单的表格,代码如下: \begin{table}\centering\begin{tabular}{||c ...

  7. Directx11教程(19) 画一个简单的地形

    原文:Directx11教程(19) 画一个简单的地形       通常我们在xz平面定义一个二维的网格,然后y的值根据一定的函数计算得到,比如正弦.余弦函数的组合等等,可以得到一个看似不错的地形或者 ...

  8. Directx11教程(6) 画一个简单的三角形(2)

    原文:Directx11教程(6) 画一个简单的三角形(2)      在上篇教程中,我们实现了在D3D11中画一个简单的三角形,但是,当我们改变窗口大小时候,三角形形状却随着窗口高宽比例改变而改变, ...

  9. Directx11教程(5) 画一个简单的三角形(1)

    原文:Directx11教程(5) 画一个简单的三角形(1)       在本篇教程中,我们将通过D3D11画一个简单的三角形.在D3D11中,GPU的渲染主要通过shader来操作(当然还有一些操作 ...

随机推荐

  1. VPN 部署方案

    VPN 对比: OpenVPN: 客户端连接太麻烦,放弃 PPTP VPN:版本较高的苹果手机没有 PPTP VPN 的连接方式,放弃 L2TP VPN:支持所有平台,客户端连接容易,最终选择部署 L ...

  2. windows系统下fis3安装教程

    注意:在安装fis3前必须安装node和npm,详情请见官网http://nodejs.org node版本要求 0.8.x,0.10.x, 0.12.x,4.x,6.x,不在此列表中的版本不予支持. ...

  3. jBPM4.4 no jBPM DB schema: no JBPM4_EXECUTION table. Run the create.jbpm.schema target first in the install tool.

    jBPM4.4 no jBPM DB schema: no JBPM4_EXECUTION table. Run the create.jbpm.schema target first in the ...

  4. dubbo/dubbox 增加原生thrift及avro支持

    (facebook) thrift / (hadoop) avro / (google) probuf(grpc)是近几年来比较抢眼的高效序列化/rpc框架,dubbo框架虽然有thrift的支持,但 ...

  5. PHP 原创视频教程-网站开发新手视频教程

    PHP 原创视频教程-网站开发新手视频教程 有偿招徒弟,,视频免费提供. 本视频教程,面向的是毫无经验的新手,快速上手的. 第一次做视频做的不好的,请各位看官多多包含. 第一部分,HTML 视频教程 ...

  6. [LeetCode] Validate Binary Search Tree 验证二叉搜索树

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  7. [LeetCode] Divide Two Integers 两数相除

    Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...

  8. 如何在HoloLens中创建一个2D的Hello World程序

    注:本文提及到的代码示例下载地址 > How to build an "Hello World" 2D app in HololLens. HoloLens 是微软的一款MR ...

  9. 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法

    手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...

  10. 跟着《beginning jquery》学写slider插件并借助自定义事件改进它

    <beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...