|
欢迎访问我的博客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. 参考资料
纯CSS3打造七巧板
用CSS代码写出的各种形状图形的方法
CSS3动画详解
腾讯动画手册
|