今天看见群里有朋友提问“十”如何用两个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,来写个太极。当时把代码也传入群共享,只是自己懒,没有理睬。趁着今天手还没停下来,就想想这个太极怎么写吧!
首先找个太极的图
然后是分析。最外面的大元,如果是一个div变成圆,左边和右边的白色、黑色,就不知道怎么填充了,干脆变成两个div半圆,左右结构。然后类似蝌蚪的头部,可以用圆来填充,最后两个小圆直接div,一共六个div。后面四个div都可以用定位来确定他们的位置。
.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就可以搞定这个效果的方法,希望知道的朋友分享一下。
这个太极好简陋
半年前就看过一个更好的
http://csineneo.com/
支持 OP 和 chrome
我勒个擦的,还有能转的
好东西,不过不是用CSS3做的旋转呀。
我当时还准备用-webkit-transform来选择的,但是查了下资料,没搞定。
犀利啊,还能转动。。。神奇。
看个太极还要选浏览器 ❓
要是这个太极在一个内核是由中国人开发的浏览器就好咯
以前看过直接写出图标的,还有一个机器猫。
貌似你图片画错了吧,两个d1_left,黑的那个应该是right吧。上面的人竟然没有发现?
对于DIV越来越陌生了…….
万能的CSS,可惜不懂。
有免费的网页制作软件吗,推荐一下。
Dreamweaver?EditPlus?
感觉还是比较麻烦,有些时候还是弄图片比较好 ❓
有傻瓜一点的工具就好了
这绝对是蛋疼之作,哎
我也贴个蛋疼之作<a href="http://www.laozhuhome.com/wp-content/uploads/demo/hm.html">蛋疼的海绵宝宝</a>
你transform玩得出神入化了,我们不是一个等级,惭愧…
夸张点,一个div都可以实现。哈哈。用:after和:before来协助,还有border属性。
❓ 果然万能
😮 这么强悍!!!
太神奇了呵呵
🙄 喜欢·~学习了~