爆发

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

使用::before::after 伪元素创建附加正方形。

8 点爆裂

8 点爆发是 2 层正方形。底部正方形是元素本身,使用:before 伪元素创建附加正方形。底部旋转 20°,顶部方形旋转 135°。

StackOverflow 文档

<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°。

StackOverflow 文档

<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);
}