最近在学习CSS布局时,尝试着排列一组圆形图形。想要的效果是:圆形图形以不规则的方式排列,但是保持整体布局的平衡和美观。这时,不规则圆形排列布局就呼之欲出。.circle { position: ab
最近在学习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类,设置每个圆形在整个布局中的位置。最终,实现了一个美观、丰富的不规则圆形排列布局。
粉丝
0
关注
0
收藏
0