css怎么移动半圆,围绕半圆（CSS）定位元素

链接中的方法完美无缺。

CSS 强>

.circle-big {

position: relative;

height:180px;

width:180px;

padding: 21px;

border-radius: 50% 50%;

margin: 100px;

}

.circle-big:before {

position: absolute;

height: 90px;

width: 180px;

border-radius: 90px 90px 0 0 ;

background: green;

content: "";

}

.circle {

border-radius: 50%;

width: 30px;

height: 30px;

background-color: red;

display: block;

position: absolute;

overflow: hidden;

top: 50%;

left: 50%;

margin: -15px;

}

.one { transform: rotate(-30deg) translate(130px); }

.two { transform: rotate(-50deg) translate(130px); }

.three { transform: rotate(-70deg) translate(130px); }

.four { transform: rotate(-90deg) translate(130px); }

.five { transform: rotate(-110deg) translate(130px); }

.six { transform: rotate(-130deg) translate(130px); }

.seven { transform: rotate(-150deg) translate(130px); }

希望这是你的期望。

如果你想增加大圆圈和小圆圈之间的距离，只需增加翻译。