Maison > Article > interface Web > 纯CSS3打造七巧板
先来个科普吧,是我在查资料过程中看到的,感觉很有意思。
宋朝有个叫黄伯思的人,对几何图形很有研究,他热情好客,发明了一种用6张小桌子组成的“宴几”——请客吃饭的小桌子。后来有人把它改进为7张桌组成的宴几,可以根据吃饭人数的不同,把桌子拼成不同的形状,比如3人拼成三角形,4人拼成四方形,6人拼成六方形……这样用餐时人人方便,气氛更好。后来,有人把宴几缩小改变到只有七块板,用它拼图,演变成一种玩具。
因为它十分巧妙好玩,所以人们叫它“七巧板”。
今天,在世界上几乎没有人不知道七巧板和七巧图,它在国外被称为“唐图”(Tangram),意思是来自中国的拼图(不是唐代发明的图)。
纳尼,原来Tangram是咱们中国的,。。。
看完了有趣的东西,该开始正题了,就是无论使用什么技术给我整出个七巧板来。。。(在前端页面里)
结合自己的知识体系,思考了下大概的思路:
考虑到时间成本(太紧了)和其他。。。原因,决定使用css3的方案。
开始想板子使用图片来做,但多亏自己以前写过一篇‘用CSS代码写出的各种形状图形的方法’,里面收录了使用CSS3制作20种图形的方法,有兴趣的同学可以看下,查了下可以满足所需的7种板子的形状。
开始之前先要验证下,所要用到的CSS3是否可以兼容所要需平台,这多亏http://caniuse.com/。
因为我要运行在移动端,查了下要用到的css3属性,在安卓2.3以上都支持,但需加前缀,所以可以放心使用。
首先我们需要一个容器和起个元素用来表示七块板子。
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="wrap"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t1 t11"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t2 t22"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t3 t33"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t4 t44"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t5 t55"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t6 t66"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t7 t77"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>
其实我们总共用到的图形总共有三种,三角形、正方形行和平行四边形。这在上面提到的文章里面全有,这里涉及到的一点点数学的知识,就是这些板子之间是有一定大小关系的,只需一点点数学知识姐可以解决了。
至此板子的表示就不是问题了,其次还需把板子移动到指定位置才可以拼成好看的图形,这全靠css3的 transform搞定,可以实现平移、缩放、旋转、变形多种操作。
这里我们设置wap的position为relative。所有板子都为absolute。并设置top和left为零,这样初始化时所有的板子都位于左上角,然后将板子的transform-origin设为左上角,就实现了定位时的好计算,下面是css部分的代码。
<span style="color: #800000;">.wrap</span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 400px</span>; }<span style="color: #800000;"> .t</span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> transform-origin</span>:<span style="color: #0000ff;">0 0</span>; }<span style="color: #800000;"> .t1</span>{<span style="color: #ff0000;"> border-top</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid red</span>;<span style="color: #ff0000;"> border-right</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid transparent</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate(150px, 150px) rotate(-135deg)</span>; }<span style="color: #800000;"> .t2</span>{<span style="color: #ff0000;"> border-top</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid #fdaf17</span>;<span style="color: #ff0000;"> border-right</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid transparent</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate(150px, 150px) rotate(135deg)</span>; }<span style="color: #800000;"> .t3</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> #c3d946</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate(150px,150px) rotate(45deg)</span>; }<span style="color: #800000;"> .t4</span>{<span style="color: #ff0000;"> border-top</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid #00bdd0</span>;<span style="color: #ff0000;"> border-right</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid transparent</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate(150px,150px) rotate(-45deg)</span>; }<span style="color: #800000;"> .t5</span>{<span style="color: #ff0000;"> border-top</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid #5dbe79</span>;<span style="color: #ff0000;"> border-right</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid transparent</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate(75px,225px) rotate(45deg)</span>; }<span style="color: #800000;"> .t6</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 75px</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate(300px) rotate(90deg) skew(45deg)</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> #ffdd01</span>; }<span style="color: #800000;"> .t7</span>{<span style="color: #ff0000;"> border-top</span>:<span style="color: #0000ff;"> 150px solid #0177bf</span>;<span style="color: #ff0000;"> border-right</span>:<span style="color: #0000ff;"> 150px solid transparent</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate(300px,300px) rotate(180deg)</span>; }
好了,七巧板终于做好了让我们来看下效果吧。
留个jsfiddle的代码,博客园不能欠入,只能留个链接了http://jsfiddle.net/yanhaijing/3tf8ac6q/1/
仅此而已了吗,当然不是,还有很多可考虑的东西,这里的css都是写死的,灵活性太差,如果用LESS的话(我用的就是less),我们可以设置一个基本长度变量(less支持变量和数学运算哦),然后其他的全部基于这个变量计算,这样只要改变这个变量,就能轻松改变整个七巧板的大小,可扩展性是不是有很大进步(实际上我就是这么做的,但jsfiddle不支持less语法,所以我就写了个css版的)。
其实还可以通过css3变化出多种图形,据说七巧板的可以拼出的图形多大几千种之多。。。快快开动你的脑筋来制作吧,做好了记得给博主留个链接啊。
进一步的提高就是通过CSS3的transtion,制作动画,在配合key-frame,可以制作七巧板变形的复杂动画,效果美轮美奂啊。
这里只贴一个图片吧,不提供代码了。。。
CSS3动画详解(http://beiyuu.com/css3-animation/)