原文:[原创]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. Cookie rejected: Illegal path attribute &quot;/nexus&quot;. Path of origin: &quot;/content/&quot; 解

    问题叙述性说明 通过运行"mvn clean deploy" 命令 将 Maven 项目公布 Nexus 当PW.举例控制台输出以下警告消息: [INFO] Downloaded: ...

  2. Java DOM4J读取XML

    DOM4J是dom4j.org出品的一个开源XML解析包.Dom4j是一个易用的.开源的库,用于XML,XPath和XSLT.它应用于Java平台,採用了Java集合框架并全然支持DOM,SAX和JA ...

  3. OnWndMsg处理功能

    于MFC于, OnWndMsg功能,如以下处理步骤: 1)首先.被推断消息有一个消息响应函数.例如OnLButtonDown()处理"左新闻"新闻. 2)数.这里以MFC 的pro ...

  4. c++输入密码以星号代替

    #include <iostream> #include <string>//注意这里的头文件! #include<conio.h> using namespace ...

  5. FireFox VS Chrome 之 调试篇

    一个完美的调试工具,FireBug! 精确跟踪每一步.仅仅要按下图所看到的,选择"脚本",然后在下方选择脚本所在的文件就可以对该文本的运行进行断点跟踪. 而且仅当一个线程运行结束后 ...

  6. 创建高性能移动 web 站点【转载】

    如果你的网站3秒钟没有响应,人们就会失去兴趣了.为了满足响应快这个愿望,需要一个不同的方法在手机上进行分析,设计和测试. 这篇文章将会对Johan Johansson在2013年4月提出"  ...

  7. 百度云BAE3.0 的ssh构造（本机ssh项目迁移到BAE3.0）

    依据百度云的java部署文档进行部署 http://developer.baidu.com/wiki/index.php?title=docs/cplat/bae/java 做例如以下改动,然后把项目 ...

  8. MemoryBarrier，Volatile

    使用MemoryBarrier,Volatile进行同步 上一节介绍了使用信号量进行同步,本节主要介绍一些非阻塞同步的方法.本节主要介绍MemoryBarrier,volatile,Interlock ...

  9. 腾讯2014在广州站实习生offer经验（TEG-开发背景）

    研究在过去的一年是linux 什么系统编程和网络编程.比较熟悉的语言c/c++,python只写一些测试client.是后台开发类,比方前面笔面的网易CC(面完hr后挂).大概3月15号就在腾讯 jo ...

  10. Linux核心regulator建筑和准备

    电源引入的物种 (百度百科)LDO这是low dropout regulator,这意味着低压差线性稳压器.它相比于传统的线性调节器.传统的线性稳压器.例如78xx系列芯片需要输入电压比输出电压高2v ...