欢迎访问我的博客GISer空间。

1. CSS3：每块板作为为一个dom元素。

1.1 用一个容器和七个元素来表示七块板。

<div class="wrap"><div class="t t1"></div><div class="t t2"></div><div class="t t3"></div><div class="t t4"></div><div class="t t5"></div><div class="t t6"></div><div class="t t7"></div>
</div>

1.2 通过CSS3的transform的平移、缩放、旋转、变形多种操作来确定七块板的位置。

  设置wrap的position为relative，七块板为absolute，并设置top和left为0，这样初始化时七块板都位于左上角，然后将板的transform-origin设为左上角，方便定位计算。尺寸和位置变化参考下图。

1.3 CSS3部分样式

.wrap {position: relative;background: #F1F1F1;width: 600px;height: 600px;margin-left: auto;margin-right: auto;
}
.t {position: absolute;top: 0;left: 0;width: 0;height: 0;transform-origin: 0 0;
}
.t1 {border-top: 212.13203435596425732025330863145px solid #008FDE;border-right: 212.13203435596425732025330863145px solid transparent;animation: t1_move 5s infinite;
}
@keyframes t1_move {0%{transform: translate(300px, 300px) rotate(-135deg);}25%{transform: translate(300px,250px) rotate(-135deg);}50%{transform: translate(350px,250px) rotate(-90deg);}75%{transform: translate(300px,300px) rotate(-90deg);}100%{transform: translate(300px,300px) rotate(-135deg);}
}
.t2 {border-top: 212.13203435596425732025330863145px solid #FEF900;border-right: 212.13203435596425732025330863145px solid transparent;animation: t2_move 5s infinite;
}
@keyframes t2_move {0%{transform: translate(300px, 300px) rotate(135deg);}25%{transform: translate(250px,300px) rotate(135deg);}50%{transform: translate(350px,350px);}75%{transform: translate(300px,300px);}100%{transform: translate(300px,300px) rotate(135deg);}
}
.t3 {width: 106.06601717798212866012665431573px;height: 106.06601717798212866012665431573px;background: #9A4378;animation: t3_move 5s infinite;
}
@keyframes t3_move {0%{transform: translate(300px,300px) rotate(45deg);}25%{transform: translate(300px,350px) rotate(45deg);}50%{transform: translate(143.994px,143.994px);}75%{transform: translate(193.934px,193.934px);}100%{transform: translate(300px,300px) rotate(45deg);}
}
.t4 {border-top: 106.06601717798212866012665431573px solid #E1177B;border-right: 106.06601717798212866012665431573px solid transparent;animation: t4_move 5s infinite;
}
@keyframes t4_move {0%{transform: translate(300px,300px) rotate(-45deg);}25%{transform: translate(350px,300px) rotate(-45deg);}50%{transform: translate(250px,143.994px) rotate(-180deg);}75%{transform: translate(300px,193.934px) rotate(-180deg);}100%{transform: translate(300px,300px) rotate(-45deg);}
}
.t5 {border-top: 106.06601717798212866012665431573px solid #00913E;border-right: 106.06601717798212866012665431573px solid transparent;animation: t5_move 5s infinite;
}
@keyframes t5_move {0%{transform: translate(225px,375px) rotate(45deg);}25%{transform: translate(225px,425px) rotate(45deg);}50%{transform: translate(250px,350px) rotate(90deg);}75%{transform: translate(300px,300px) rotate(90deg);}100%{transform: translate(225px,375px) rotate(45deg);}
}
.t6 {width: 150px;height: 75px;background: #2A0F70;animation: t6_move 5s infinite;
}
@keyframes t6_move {0%{transform: translate(450px,150px) rotate(90deg) skew(45deg);}25%{transform: translate(500px,150px) rotate(90deg) skew(45deg);}50%{transform: translate(143.994px,350px) rotate(45deg) skew(45deg);}75%{transform: translate(193.934px,300px) rotate(45deg) skew(45deg);}100%{transform: translate(450px,150px) rotate(90deg) skew(45deg);}
}
.t7 {border-top: 150px solid #EB7A14;border-right: 150px solid transparent;animation: t7_move 5s infinite;
}
@keyframes t7_move {0%{transform: translate(450px,450px) rotate(180deg);}25%{transform: translate(500px,500px) rotate(180deg);}50%{transform: translate(37.868px,300px) rotate(-45deg);}75%{transform: translate(87.868px,300px) rotate(-45deg);}100%{transform: translate(450px,450px) rotate(180deg);}
}

1.4 效果

2. 附：Canvas实现七巧板（HTML5新特性）

2.1 Canvas标签

<canvas id="canvas" style="background-color: #E6E6E6; display: block; margin: 10px auto"></canvas>

2.2 Script代码

//定义tangram数组，表示七块板对象，每个对象中p属性表示每块板的定点坐标，color属性表示填充颜色。
var tangram = [{p:[{x:150,y:150},{x:450,y:150},{x:300,y:300}],color:"#008FDE"},{p:[{x:150,y:150},{x:300,y:300},{x:150,y:450}],color:"#FEF900"},{p:[{x:300,y:300},{x:375,y:375},{x:300,y:450},{x:225,y:375}],color:"#9A4378"},{p:[{x:300,y:300},{x:375,y:225},{x:375,y:375}],color:"#E1177B"},{p:[{x:150,y:450},{x:225,y:375},{x:300,y:450}],color:"#00913E"},{p:[{x:375,y:225},{x:450,y:150},{x:450,y:300},{x:375,y:375}],color:"#2A0F70"},{p:[{x:300,y:450},{x:450,y:300},{x:450,y:450}],color:"#EB7A14"}
];
//获取canvas对象，并设置宽和高，然后调用draw函数。
window.onload = function() {var canvas = document.getElementById("canvas");canvas.width = 600;canvas.height = 600;var context = canvas.getContext("2d");for(var i = 0; i < tangram.length; i++)draw(tangram[i], context);
};
//draw函数，绘制每一块板。
function draw(piece, cxt) {cxt.beginPath();cxt.moveTo(piece.p[0].x, piece.p[0].y);for(var i = 1; i < piece.p.length; i++)cxt.lineTo(piece.p[i].x, piece.p[i].y);cxt.closePath();cxt.fillStyle = piece.color;cxt.fill();
}

3. 参考资料

纯CSS3打造七巧板

用CSS代码写出的各种形状图形的方法

CSS3动画详解

腾讯动画手册