七巧板---闲来无事，童趣使然

工作之余，实在无聊，想起了七巧板这一童年快乐

先是找个七巧板的图片，发现一共有五个三角形，一个斜四边形，一个正方形，只有斜四边形不太好实现，这里也是直接百度了一下答案 (https://www.cnblogs.com/yanhaijing/p/3967168.html)

下边奉上七巧板代码，组成了一个四边形

html

<div class="warp">
    <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>

css

.warp {
      position: relative;
      width: 300px;
      height: 400px;
    }
    .t {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      transform-origin: 0 0;
    }
    .t1 {
      border-top: 212px solid red;
      border-right: 212px solid transparent;
      transform: translate(150px, 150px) rotate(-135deg);
      animation: t1identifier 10s forwards;
    }
    .t2 {
      border-top: 212px solid #fdaf17;
      border-right: 212px solid transparent;
      transform: translate(150px, 150px) rotate(135deg);
      animation: t2identifier 10s forwards;
    }
    .t3 {
      width: 106px;
      height: 106px;
      background: yellow;
      transform: translate(150px, 150px) rotate(45deg);
      animation: t3identifier 10s forwards;
    }
    .t4 {
      border-top: 106px solid green;
      border-right: 106px solid transparent;
      transform: translate(150px, 150px) rotate(-45deg);
      animation: t4identifier 10s forwards;
    }
    .t5 {
      border-top: 106px solid blue;
      border-right: 106px solid transparent;
      transform: translate(75px, 225px) rotate(45deg);
      animation: t5identifier 10s forwards;
    }
    .t6 {
      width: 150px;
      height: 75px;
      transform: translate(300px) rotate(90deg) skew(45deg);
      background: purple;
      animation: t6identifier 10s forwards;
    }
    .t7 {
      border-top: 150px solid pink;
      border-right: 150px solid transparent;
      transform: translate(300px, 300px) rotate(180deg);
      animation: t7identifier 10s forwards;
    }
// 接下来就是重点

@keyframes t1identifier {
50% {
transform: translate(225px, 150px) rotate(-45deg);
}
100% {
transform: translate(150px, 150px) rotate(-180deg);
}
}
@keyframes t2identifier {
50% {
transform: translate(150px, 75px) rotate(45deg);
}
100% {
transform: translate(150px, 150px) rotate(90deg);
}
}
@keyframes t3identifier {
50% {
transform: translate(375px, 99px) rotate(0deg);
}
100% {
transform: translate(150px, 100px) rotate(0deg);
}
}
@keyframes t4identifier {
50% {
transform: translate(0, 225px) rotate(-135deg);
}
100% {
transform: translate(150px, 100px) rotate(-90deg);
}
}
@keyframes t5identifier {
50% {
transform: translate(225px, 150px) rotate(-135deg);
}
100% {
transform: translate(150px, 206px) rotate(0deg);
}
}
@keyframes t6identifier {
50% {
transform: translate(75px, 150px) rotate(180deg) skew(-45deg);
}
100% {
transform: translate(256px, 100px) rotate(45deg) skew(45deg);
}
}
@keyframes t7identifier {
50% {
transform: translate(585px, 150px) rotate(135deg);
}
100% {
transform: translate(256px, 100px) rotate(-45deg);
}
}

　　这里做了俩个图案，一个是剑，一个是鱼