用CSS实现环形效果的行星

Question

我正在尝试制作一个带环的星球，就像这张照片

我目前正在以一种非常肮脏的方式做这件事。环（椭圆）是一个没有背景和黑色边框旋转的div，我通过在顶部添加另一半红色圆圈来实现环在行星后面的效果。

以下是JSFiddle，以下是一个代码段演示。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class='container'>
  <div class="full-planet"></div>
  <div class='elipse'></div>
  <div class="half-planet"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

调整参数以获得良好的对齐非常麻烦。例如，如果我必须更改一个参数，我必须更改几乎所有其他参数以保持对齐。有没有办法做到这一点，以便我不需要根据我的愿景不断调整参数？ 我觉得有一种更清洁的方法。

Answer 1

使用SVG：

我通常建议将SVG用于此类效果/形状，因为使用SVG绘制弧更容易。 SVG元素的z-index取决于它们在DOM中出现的顺序。因此，控制订单也更容易。 SVG本身也具有响应性。

您可以在this page中找到有关如何使用SVG绘制椭圆弧的更多信息。

＆＃13;

＆＃13;

svg {
  width: 200px;
  height: 200px;
  margin: 20px;
}

＆＃13;

<svg viewBox='0 0 130 130'>
  <path d='M0,78 a65,25 0 1 1 102.5,45' stroke='black' stroke-width='2' fill='transparent' transform='rotate(45,100,100)' />
  <circle cx='65' cy='65' r='45' fill='red' />
  <path d='M0,78 a65,25 0 1 0 102.5,45' stroke='black' stroke-width='2' fill='transparent' transform='rotate(45,100,100)' />
</svg>

＆＃13;

＆＃13;

＆＃13;

使用CSS：

使用CSS会很难创建该效果，并且您很可能需要额外的元素来产生效果。在你的代码中，你已经在顶部放置了一个额外的半圆以使戒指的一部分落后，而在我的下面的代码片段中，我使用了一个额外的元素，其中z-index更低的一部分用于戒指。但是，我几乎在所有设置中都使用了百分比，因此在更改时不需要更改很多参数。正如您在片段输出中所看到的（悬停在形状上），它也非常敏感。

＆＃13;

＆＃13;

.wrapper {
  position: relative;
  height: 200px;
  width: 200px;
}
.ring { /* produces the front part of the ring */
  position: absolute;
  height: 100%;
  width: 45%;
  left: 27.5%; /* half of 100% - width (to position in center) */
  border: 2px solid;
  border-color: black transparent black black;
  border-radius: 50%;
  transform: rotate(-45deg);
  z-index: 2; /* brings it forward */
}
.ring-behind { /* produces the part that goes behind */
  position: absolute;
  height: 100%;
  width: 45%;
  left: 27.5%; /* half of 100% - width (to position in center) */
  border: 2px solid;
  border-color: transparent black transparent transparent;
  border-radius: 50%;
  transform: rotate(-45deg);
  z-index: -1; /* sends it behind */
}
.planet {
  position: absolute;
  height: 75%;
  width: 75%;
  top: 12.5%; /* half of 100% - height (to position in middle) */
  left: 12.5%; /* half of 100% - width (to position in center) */
  border-radius: 50%;
  background: red;
  z-index: 1; /* above the back part of the ring but below the front */
}

/* just for demo */

.wrapper {
  transition: all 1s;
}
.wrapper:hover {
  height: 300px;
  width: 300px;
}

＆＃13;

<div class='wrapper'>
  <div class='ring'></div>
  <div class='ring-behind'></div>
  <div class='planet'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有一天事情会变得更容易......

CSS解决方案，应该是（行星的一个div，响铃标记的响应标记，等等......但仅适用于webkit）

.planet {
  width: 330px;
  height: 330px;
  background-color: lightgreen;
  border-radius: 50%;
  margin: 100px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  box-shadow: inset green -20px -20px 70px;
}

.ring {
  width: 150%;
  height: 150%;
  border: solid 10px red;
  border-radius: 50%;
  top: -25%; 
  left: -25%; 
  position: absolute;
  transform: rotate3d(0.8, 0.2, 0, 75deg); 
  box-sizing: border-box;
}

<div class="planet">
<div class="ring"></div>
</div>