[原创]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简单几步画一个乾坤图的更多相关文章
- css3简单几步画一个乾坤图
原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...
- 如何用Apache POI操作Excel文件-----如何用Apache POI 画一个离散图
有的时候,我们需要Excel中的数据,通过一个图画,可视化的表现出来. 那么这个时候,应该如何做呢?现在就借花献佛,以Apache POI自己提供的一个例子为例,给大家演示一下POI的API 如何画图 ...
- PostScript的简单例子-用粗线画一个圆
一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...
- 一步一步写一个简单通用的makefile(三)
上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...
- Directx11学习笔记【十一】 画一个简单的三角形--effect框架的使用
这里不再介绍effect框架的具体使用,有关effect框架使用可参考http://www.cnblogs.com/zhangbaochong/p/5475961.html 实现的功能依然是画一个简单 ...
- 如何用latex画一个简单的表格
latex毫无疑问是一个十分强大的论文写作工具,所以掌握它就显得非常有意义,讲一下如何画一个简单的表格,代码如下: \begin{table}\centering\begin{tabular}{||c ...
- Directx11教程(19) 画一个简单的地形
原文:Directx11教程(19) 画一个简单的地形 通常我们在xz平面定义一个二维的网格,然后y的值根据一定的函数计算得到,比如正弦.余弦函数的组合等等,可以得到一个看似不错的地形或者 ...
- Directx11教程(6) 画一个简单的三角形(2)
原文:Directx11教程(6) 画一个简单的三角形(2) 在上篇教程中,我们实现了在D3D11中画一个简单的三角形,但是,当我们改变窗口大小时候,三角形形状却随着窗口高宽比例改变而改变, ...
- Directx11教程(5) 画一个简单的三角形(1)
原文:Directx11教程(5) 画一个简单的三角形(1) 在本篇教程中,我们将通过D3D11画一个简单的三角形.在D3D11中,GPU的渲染主要通过shader来操作(当然还有一些操作 ...
随机推荐
- MongoDB数据库的CURD的一些基本语句
from:http://www.data321.com/shujuku/20160514417/addToSetQianMianBuXuYaoJinXing 插入文档: SQL语句: INSERT I ...
- Spring + SpringMVC + Druid + JPA(Hibernate impl) 给你一个稳妥的后端解决方案
最近手头的工作不太繁重,自己试着倒腾了一套用开源框架组建的 JavaWeb 后端解决方案. 感觉还不错的样子,但实践和项目实战还是有很大的落差,这里只做抛砖引玉之用. 项目 git 地址:https: ...
- OLTP(on-line transaction processing)与OLAP(On-Line Analytical Processing)
OLTP与OLAP的介绍 数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction processing).联机分析处理OLAP(On-Line Analytical ...
- spring 拦截器
1.mvc.xml <!-- 自定义拦截链配置 --> <mvc:interceptors> <mvc:interceptor> <mvc:mapping p ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- Android基础总结(十一)
Fragment(重要) 用途:在一个Activity里切换界面,切换界面时只切换Fragment里面的内容 生命周期方法跟Activity一致,可以理解把其为就是一个Activity fragmen ...
- MySQL数据库创建视图
视图可以说是一种虚拟表,建立在基本表的基础上,通过关联一个表或者多个表来获取多个表中需要的字段,视图只是用来查询数据并不能用来存储数据信息. 我有以下几张表: -------image表---- -- ...
- 【BZOJ-1127】KUP 悬线法 + 贪心
1127: [POI2008]KUP Time Limit: 10 Sec Memory Limit: 162 MBSec Special JudgeSubmit: 317 Solved: 11 ...
- ReactNative 告别CodePush,自建热更新版本升级环境
微软的CodePush热更新非常难用大家都知道,速度跟被墙了没什么区别. 另外一方面,我们不希望把代码放到别人的服务器.自己写接口更新总归感觉安全一点. so,就来自己搞个React-Native A ...
- django进阶
路由系统 简而言之,django的路由系统作用就是使views里面处理数据的函数与请求的url建立映射关系.使请求到来之后,根据urls.py里的关系条目,去查找到与请求对应的处理方法,从而返回给客户 ...