西门的后花园

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

无聊用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就可以搞定这个效果的方法,希望知道的朋友分享一下。

评论列表

  1. 这个太极好简陋

    半年前就看过一个更好的
    http://csineneo.com/

    支持 OP 和 chrome

  2. 看个太极还要选浏览器 ❓

  3. 要是这个太极在一个内核是由中国人开发的浏览器就好咯

  4. 以前看过直接写出图标的,还有一个机器猫。

  5. 貌似你图片画错了吧,两个d1_left,黑的那个应该是right吧。上面的人竟然没有发现?

  6. 对于DIV越来越陌生了…….

  7. 万能的CSS,可惜不懂。

  8. 有免费的网页制作软件吗,推荐一下。

  9. 感觉还是比较麻烦,有些时候还是弄图片比较好 ❓

  10. 有傻瓜一点的工具就好了

  11. 夸张点,一个div都可以实现。哈哈。用:after和:before来协助,还有border属性。

  12. ❓ 果然万能

  13. 😮 这么强悍!!!

  14. 太神奇了呵呵

  15. 🙄 喜欢·~学习了~

发表评论

分类目录