[分享]CSS不规则的圆形排列布局

最近在学习CSS布局时，尝试着排列一组圆形图形。想要的效果是：圆形图形以不规则的方式排列，但是保持整体布局的平衡和美观。这时，不规则圆形排列布局就呼之欲出。.circle { : absolute; ...

最近在学习CSS布局时，尝试着排列一组圆形图形。想要的效果是：圆形图形以不规则的方式排列，但是保持整体布局的平衡和美观。这时，不规则圆形排列布局就呼之欲出。

.circle {
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.circle:nth-child(odd) {
  width: 100px;
  height: 100px;
}
.circle:nth-child(even) {
  width: 80px;
  height: 80px;
}

.circle-1 {
  top: 40%;
  left: 40%;
}
.circle-2 {
  top: 18%;
  left: 55%;
}
.circle-3 {
  top: 60%;
  left: 60%;
}
.circle-4 {
  top: 20%;
  left: 25%;
}
.circle-5 {
  top: 80%;
  left: 25%;
}
.circle-6 {
  top: 50%;
  left: 15%;
}
.circle-7 {
  top: 10%;
  left: 80%;
} 

上面的代码展示了如何使用CSS实现不规则的圆形布局。首先，我们定义一个.circle类，设置圆形的样式及阴影。然后，通过:nth-child选择器，设置奇偶数圆形的大小，使整个布局更加丰富。接着，通过circle-x类，设置每个圆形在整个布局中的位置。最终，实现了一个美观、丰富的不规则圆形排列布局。