爆發

爆發類似於恆星，但是點距離身體的距離較短。將爆裂形狀視為正方形，頂部有額外的，略微旋轉的方塊。

使用::before 和::after 偽元素建立附加正方形。

8 點爆裂

8 點爆發是 2 層正方形。底部正方形是元素本身，使用:before 偽元素建立附加正方形。底部旋轉 20°，頂部方形旋轉 135°。

<div class="burst-8"></div>

.burst-8 {
  background: rgb(246, 156, 85);
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -ms-transform: rotate(20deg);
  transform: rotate(20eg);
}

.burst-8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

12 點爆裂

12 點爆發是 3 層正方形。底部正方形是元素本身，使用:before 和:after 偽元素建立附加正方形。底部旋轉 0°，下一個旋轉方向旋轉 30°，頂部旋轉 60°。

<div class="burst-12"></div>

.burst-12 {
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
}

.burst-12::before {
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.burst-12::after {
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}