西门的后花园

一个热爱网络的年轻人的博客

无聊用CSS写的两个简单效果:十、CSS3太极

今天看见群里有朋友提问“十”如何用两个div完成。其实很简单,方法也有很多种,为什么他不先思考一下再问呢?或许这就是惰性和依赖性吧。

十

随便想了一下,不想用定位,那就用负边距来实现吧。DEMO(十1)

.d1_h{float:left;width:100px;height:30px;margin-top:35px;background-color:#f00;}
.d1_s{float:left;width:30px;height:100px;margin-left:-65px;background-color:#f00;}

群里也有朋友用定位实现了。DEMO(十2)

.d2_h{position:absolute;top:35px;left:0;width:100px;height:30px;background-color:#aaa;}
.d2_s{position:absolute;top:0;left:35px;width:30px;height:100px;background-color:#aaa;}

无意间想起以前志哥在群里说过,用CSS3加几个div,来写个太极。当时把代码也传入群共享,只是自己懒,没有理睬。趁着今天手还没停下来,就想想这个太极怎么写吧!

首先找个太极的图

CSS3太极

然后是分析。最外面的大元,如果是一个div变成圆,左边和右边的白色、黑色,就不知道怎么填充了,干脆变成两个div半圆,左右结构。然后类似蝌蚪的头部,可以用圆来填充,最后两个小圆直接div,一共六个div。后面四个div都可以用定位来确定他们的位置。

CSS3太极

.d1_l{position:relative;float:left;width:249px;height:500px;border:1px solid #000;border-right:0 none;-moz-border-radius:250px 0 0 250px;-webkit-border-radius:250px 0 0 250px;}
.d1_r{float:left;width:250px;height:502px;-moz-border-radius:0 250px 250px 0;-webkit-border-radius:0 250px 250px 0;background-color:#000;}
.d2_t{position:absolute;top:0;left:125px;width:250px;height:250px;-moz-border-radius:125px;-webkit-border-radius:125px;background-color:#000;}
.d2_b{position:absolute;bottom:0;left:125px;width:250px;height:250px;-moz-border-radius:125px;-webkit-border-radius:125px;background-color:#fff;}
.d3_t{position:absolute;top:100px;left:100px;width:50px;height:50px;-moz-border-radius:25px;-webkit-border-radius:25px;background-color:#fff;}
.d3_b{position:absolute;top:100px;left:100px;width:50px;height:50px;-moz-border-radius:25px;-webkit-border-radius:25px;background-color:#000;}

CSS3太极DEMO(只兼容chrome和FF,其他浏览器就不用点了)

相信还有少于6个div就可以搞定这个效果的方法,希望知道的朋友分享一下。

评论已关闭

分类目录