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

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

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

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标签

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. 参考资料