原文:[原创]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. 做一个自动修改本机IP和mac的bat文件

    原文:做一个自动修改本机IP和mac的bat文件 1.ip bat修改理论探讨 前两天我突然萌生了一个念头:能不能做一个小程序来实现自动配置或修改IP和mac,达到一键搞定的目的,这样尤其适合那些带着 ...

  2. 对比Windows 8模拟器(Simulator)和Windows Phone仿真器(Emulator)

    原文:对比Windows 8模拟器(Simulator)和Windows Phone仿真器(Emulator) 从事移动应用开发,经常会用到模拟器(Simulator)和仿真器(Emulator),本 ...

  3. [创意标题] spoj 11354 Amusing numbers

    意甲冠军: 给k(1<=k<=10^15),先询问k 大只包含数字5和6的数目是多少 实例 1那是,5 ,3那是,55 .4那是,56 思考: 首先,我们可以找到.有许多2这是头号,有两个 ...

  4. android user如何打开一个版本号root才干

    首先,你要确认你要打开adbd 的root 才干,或者让app 它有可能获得root 才干.   (1). adbd 的root 才干 我们通常debug user 当问题的版本号, 或行为user ...

  5. SQL Server高可用——日志传送（4-1）——概论

    原文:SQL Server高可用--日志传送(4-1)--概论 本文作为学习总结,部分内容出自联机丛书及其他书籍 日志传送是什么? SQLServer 2012之前(2012出现了AlwaysOn), ...

  6. 【Android小应用】强迫症头像生成器

    近期一段时间在微信朋友圈,在头像的右上角添加一个红底白字的数字,让非常多有强迫症的同学点个不停,深深佩服发明这样的头像的姑娘,太机智了.但它不能自己定义,这是硬伤.... 这是朋友圈里的效果图: 这个 ...

  7. 关于.NET，.NET Framework 和ASP.NET的总结

    .NET 1.1.        .NET是 Microsoft XML Web services 平台和技术. 1.2.        一个.NET应用是一个运行于.NET Framework之上的 ...

  8. 解决因特网和xshell考虑到问题

    首先需要解释.我们学校的网络是免费的.无论是实验室或宿舍.因此,互联网是基于Mac地址分配IP的,所以我VirtualBox安装了centos之后,话.就须要将VirtualBox的mac地址改成和我 ...

  9. 原生js实现 常见的jquery的功能

    原生选择器   充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...

  10. C#依据word模版动态生成文档

    新生开学,各院系辅导员代领校园卡.需要打印一份领取卡的协议,协议模版固定,但各院系卡的数量不同.需要从excel表格中抽取数据往word文件中填,同事咨询是否可以用word中的邮件合并功能,心想有这功 ...