爆发

爆发类似于恒星，但是点距离身体的距离较短。将爆裂形状视为正方形，顶部有额外的，略微旋转的方块。

使用::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);
}