css3简单几步画一个乾坤图
2014-06-03 17:25
260 查看
原文:[原创]css3简单几步画一个乾坤图
效果如上,鼠标移上去会有动画。
代码如下非常简单:
View Code
步骤就四步:
1:先写半边,再复制一份在它下面
2:把下面半边旋转180度,transform:rotate(180deg);
3:把下面半边反色,可以使用css3的反色:-webkit-filter:invert(1); 但是目前只有webkit的内核支持了,所以还是自己写css设置background吧
4:接着再复制一份完整的乾坤图,要注意叠在一起,然后设置一个动画就好了,我这里的动画是放大+透明transform:scale(1.5) rotate(180deg);
好了,这就写完了。我为什么画乾坤图呢,是因为我名字里面有个坤咯。
哈哈,应该是端午节闲的。
代码如下非常简单:
<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>
View Code
步骤就四步:
1:先写半边,再复制一份在它下面
2:把下面半边旋转180度,transform:rotate(180deg);
3:把下面半边反色,可以使用css3的反色:-webkit-filter:invert(1); 但是目前只有webkit的内核支持了,所以还是自己写css设置background吧
4:接着再复制一份完整的乾坤图,要注意叠在一起,然后设置一个动画就好了,我这里的动画是放大+透明transform:scale(1.5) rotate(180deg);
好了,这就写完了。我为什么画乾坤图呢,是因为我名字里面有个坤咯。
哈哈,应该是端午节闲的。
相关文章推荐
- [原创]css3简单几步画一个乾坤图
- css3clock.js - 一个用CSS3与纯js实现的简单时钟
- CSS3 实现的一个简单的"动态主菜单" 示例[转]
- 如何用Html+css3写一个简单的网页
- css3和jQuery实现一个简单的标签页效果
- 用CSS3写的一个简单分页样式(兼容ie9及以上)
- css3做一个简单的加载效果
- 一个简单的CSS3重复动画
- css3加js做一个简单的3D行星运转效果
- css3 一个简单的静态立方体
- QEMU 简单几步搭建一个虚拟的ARM开发板
- CSS3制作一个简单的进度条
- CSS3的一个简单导航栏实现
- 自定义TextView简单几步制作一个展示消息的滚动条
- 简单几步搭建一个基于Docker的Tomcat运行环境!
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
- css3简单的方法画出一个同心圆
- CSS3 animation--写一个简单的loading动画
- 简单几步写一个laravel扩展包
- 在树莓派 3 上运行 openSUSE:简单几步搭建一个实用系统