js小圆均匀围绕在大圆上代码怎么布局
时间: 2023-12-14 12:38:16 浏览: 52
可以使用 CSS 实现小圆均匀围绕在大圆上的效果,以下是一个简单的示例代码:
HTML 代码:
```html
<div class="container">
<div class="big-circle"></div>
<div class="small-circle"></div>
<div class="small-circle"></div>
<div class="small-circle"></div>
<div class="small-circle"></div>
<div class="small-circle"></div>
</div>
```
CSS 代码:
```css
.container {
position: relative;
width: 300px;
height: 300px;
}
.big-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
}
.small-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(60deg) translate(100px) rotate(-60deg);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f00;
}
```
解释一下代码:
- `.container` 是一个容器,用来包含大圆和小圆。
- `.big-circle` 是大圆,使用绝对定位、居中和圆角实现。
- `.small-circle` 是小圆,也使用绝对定位,通过 CSS transform 属性实现绕大圆均匀分布的效果。其中,`translate(-50%, -50%)` 用来将小圆的中心点移到大圆的中心点,`rotate(60deg)` 用来将小圆旋转 60 度,`translate(100px)` 用来将小圆向外移动 100 像素,最后一个 `rotate(-60deg)` 用来将小圆再次旋转 -60 度,使其方向正确。