CSS 爆发

2024-04-12 04:43:03 350

示例

爆发类似于恒星，但其点与人体的距离较小。可以将爆裂形状想象成一个正方形，顶部有多个稍微旋转的正方形。

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

CSS 爆发

示例

热门推荐

随机推荐