CSS 爆发
示例
爆发类似于恒星，但其点与人体的距离较小。可以将爆裂形状想象成一个正方形，顶部有多个稍微旋转的正方形。
使用::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);
}