我正在尝试制作一个像这张照片一样有环的行星
目前我是用一种看起来非常不干净的方法来实现。环 (椭圆) 是一个没有背景和黑色边框旋转的 div,我通过在顶部添加另外半个红色圆圈来实现环绕星球的效果。
下面是JSFiddle链接,以及演示代码:
.elipse {
width: 300px;
height: 105px;
background: none;
border-radius: 50%;
-ms-transform: rotate(40deg); /* IE 9 */
-webkit-transform: rotate(40deg); /* Safari */
transform: rotate(40deg);
position: absolute;
left: 45px;
top: 45px;
border: 5px solid black;
}
.full-planet {
height: 170px;
width: 170px;
border-radius: 170px 170px 170px 170px;
-moz-border-radius: 170px 170px 170px 170px;
-webkit-border-radius: 170px 170px 170px 170px;
position: absolute;
left: 120px;
top: 20px;
background: red;
}
.half-planet {
height: 85px;
width: 170px;
border-radius: 170px 170px 0 0;
-moz-border-radius: 170px 170px 0 0;
-webkit-border-radius: 170px 170px 0 0;
-ms-transform: rotate(40deg); /* IE 9 */
-webkit-transform: rotate(40deg); /* Safari */
transform: rotate(40deg);
position: absolute;
left: 147px;
top: 30px;
background: red;
}
.cont {
padding-left: 100px;
padding-top: 100px;
position: relative;
width: 0;
height: 0;
}
<div class='container'>
<div class="full-planet"></div>
<div class='elipse'></div>
<div class="half-planet"></div>
</div>
调整参数以获得良好的对齐效果非常麻烦。如果我需要更改一个参数,例如,我几乎必须更改其他所有参数才能保持对齐。有没有一种方法可以使这个过程更简单,不需要根据我的视觉不断调整参数?
我感觉有一种更简洁的方法。