原文:纯CSS3打造七巧板

最近项目上要制作一个七巧板,脑子里瞬间闪现,什么。。。七巧板不是小时候玩的吗。。。

七巧板的由来

先来个科普吧,是我在查资料过程中看到的,感觉很有意思。

宋朝有个叫黄伯思的人,对几何图形很有研究,他热情好客,发明了一种用6张小桌子组成的“宴几”——请客吃饭的小桌子。后来有人把它改进为7张桌组成的宴几,可以根据吃饭人数的不同,把桌子拼成不同的形状,比如3人拼成三角形,4人拼成四方形,6人拼成六方形……这样用餐时人人方便,气氛更好。后来,有人把宴几缩小改变到只有七块板,用它拼图,演变成一种玩具。

因为它十分巧妙好玩,所以人们叫它“七巧板”。

今天,在世界上几乎没有人不知道七巧板和七巧图,它在国外被称为“唐图”(Tangram),意思是来自中国的拼图(不是唐代发明的图)。

纳尼,原来Tangram是咱们中国的,。。。

方案

看完了有趣的东西,该开始正题了,就是无论使用什么技术给我整出个七巧板来。。。(在前端页面里)

结合自己的知识体系,思考了下大概的思路:

  1. Canvas,万能的Cavans一定可以解决问题,加上之前做过Painter。灵活性+扩展性满足。
  2. CSS3,每个版子是一个dom元素,然后使用css3搞定。灵活性 扩展性不如canvas。
  3. svg,这个应该也可以吧,但自己对这方面的知识匮乏。
  4. 。。。暂时未想出。

考虑到时间成本(太紧了)和其他。。。原因,决定使用css3的方案。

开始想板子使用图片来做,但多亏自己以前写过一篇‘用CSS代码写出的各种形状图形的方法’,里面收录了使用CSS3制作20种图形的方法,有兴趣的同学可以看下,查了下可以满足所需的7种板子的形状。

用到属性

  • transform
  • translation

技术验证

开始之前先要验证下,所要用到的CSS3是否可以兼容所要需平台,这多亏http://caniuse.com/。

因为我要运行在移动端,查了下要用到的css3属性,在安卓2.3以上都支持,但需加前缀,所以可以放心使用。

编码实现

首先我们需要一个容器和起个元素用来表示七块板子。

<div class="wrap">
<div class="t t1 t11"></div>
<div class="t t2 t22"></div>
<div class="t t3 t33"></div>
<div class="t t4 t44"></div>
<div class="t t5 t55"></div>
<div class="t t6 t66"></div>
<div class="t t7 t77"></div>
</div>

其实我们总共用到的图形总共有三种,三角形、正方形行和平行四边形。这在上面提到的文章里面全有,这里涉及到的一点点数学的知识,就是这些板子之间是有一定大小关系的,只需一点点数学知识姐可以解决了。

至此板子的表示就不是问题了,其次还需把板子移动到指定位置才可以拼成好看的图形,这全靠css3的 transform搞定,可以实现平移、缩放、旋转、变形多种操作。

这里我们设置wap的position为relative。所有板子都为absolute。并设置top和left为零,这样初始化时所有的板子都位于左上角,然后将板子的transform-origin设为左上角,就实现了定位时的好计算,下面是css部分的代码。

.wrap{
position: relative;
width:300px;
height: 400px;
}
.t{
position: absolute;
top:;
left:;
width:;
height:;
transform-origin:0 0;
}
.t1{ border-top: 212.13203435596425732025330863145px solid red;
border-right: 212.13203435596425732025330863145px solid transparent;
transform: translate(150px, 150px) rotate(-135deg);
}
.t2{
border-top: 212.13203435596425732025330863145px solid #fdaf17;
border-right: 212.13203435596425732025330863145px solid transparent;
transform: translate(150px, 150px) rotate(135deg);
}
.t3{
width: 106.06601717798212866012665431573px;
height: 106.06601717798212866012665431573px;
background: #c3d946;
transform: translate(150px,150px) rotate(45deg);
}
.t4{
border-top: 106.06601717798212866012665431573px solid #00bdd0;
border-right: 106.06601717798212866012665431573px solid transparent;
transform: translate(150px,150px) rotate(-45deg);
}
.t5{
border-top: 106.06601717798212866012665431573px solid #5dbe79;
border-right: 106.06601717798212866012665431573px solid transparent;
transform: translate(75px,225px) rotate(45deg);
}
.t6{
width: 150px;
height: 75px;
transform: translate(300px) rotate(90deg) skew(45deg);
background: #ffdd01;
}
.t7{
border-top: 150px solid #0177bf;
border-right: 150px solid transparent;
transform: translate(300px,300px) rotate(180deg);
}

DEMO

好了,七巧板终于做好了让我们来看下效果吧。

留个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/)

  • 腾讯动画手册(http://ecd.tencent.com/css3/guide.html)

纯CSS3打造七巧板的更多相关文章

  1. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  2. 纯css3打造瀑布流布局

    纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...

  3. 纯CSS3打造非常炫的加载动画

    纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...

  4. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  5. 纯CSS3打造圆形菜单

    原理是使用相对定位和绝对定位确定圆形菜单位置. 使用伪类选择器E:hover确定悬浮时候的效果,动画效果用CSS3的transition属性. 大概代码如下. html: <div id=&qu ...

  6. 学用纯CSS3打造可折叠树状菜单

    CSS执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多.首先就是CSS规则的specific ...

  7. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  8. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

  9. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

随机推荐

  1. Android学习小Demo(19)利用Loader来实时接收短信

    之前写过一篇文章<Android学习小Demo(13)Android中关于ContentObserver的使用>,在里面利用ContentOberver去监測短信URI内容的变化.我们先来 ...

  2. (hdu step 7.1.5)Maple trees(凸包的最小半径寻找掩护轮)

    称号: Maple trees Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...

  3. [MySQL]--&gt;询5 几天之内解决在新年发行一个同事的生日过程

    前言:        遇到朋友提问,例如以下:SELECT * FROM ali_users WHERE  DATEDIFF(CAST(CONCAT(DATE_FORMAT(NOW(),'%y'),D ...

  4. Java多播通讯框架 JGroups(转)

    JGroups是一个可靠的群组通讯Java工具包.它基于IP组播(IP multicast),但在可靠性,组成员管理上对它作了扩展. JGroups的可靠性体现在: 1,对所有接收者的消息的无丢失传输 ...

  5. Teams(uva11609+组合)

    I - Teams Time Limit:1000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit cid=7795 ...

  6. Git现实(一个)版本控制概述

    从今天开始.我们了解的分布式版本控制系统Git相关内容.了解Git之前,我们的第一个版本控制系统,使宏观的描述. 什么是版本号控制 版本号控制是指通过对文件内容的变化进行记录,并为每次的变化进行编号, ...

  7. Decorator模式设计模式

    装饰者模式定义:动态地将责任附加到对象上. 若要扩展功能.装饰者提供了比继续更有弹性的替代方案. 简单定义:包装一个对象.以提供新的行为. 装饰者模式能够有效应对类爆炸问题. OO原则: 对扩展开放, ...

  8. C代码分析器(一个 公开赛冠军)

    最近心血来潮,我希望能写一个通用的代码分析工具(其实这个词有点太.事实上为C代码).看到这几天我看到代码头晕眼花,尽管Source Insight救命,仍然没有足够的智慧思考很多地方. 如今主要遇到的 ...

  9. android开源应用(主要是博客上带有分析的)收集 【持续更新】

    2014.5.24更新: (android高仿系列)今日头条    http://blog.csdn.net/vipzjyno1/article/details/26514543 CSDN Andro ...

  10. Cocos2d-x3.3它DrawPrimitivesTest分析

    1.代码列表 2.VisibleRect类 该类是test-cpp自带工具类 3.HelloWorldScene类 同前面代码 4.DrawPrimitivesDemo类 1).h文件 #includ ...