七巧板---閑來無事，童趣使然

工作之余，實在無聊，想起了七巧板這一童年快樂

先是找個七巧板的圖片，發現一共有五個三角形，一個斜四邊形，一個正方形，只有斜四邊形不太好實現，這里也是直接百度了一下答案 (http://www.rzrgm.cn/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);
}
}

　　這里做了倆個圖案，一個是劍，一個是魚

posted @ 2021-10-18 14:02 豆芽001 閱讀(239) 評論(0) 收藏舉報

刷新頁面返回頂部

豆芽.先森

七巧板---閑來無事，童趣使然

公告