HTML – 使用CSS实现具有环效果的行星

概述我正试图制作一个带环的星球,就像这张照片一样 我目前正在做一些看起来很脏的方式.环(椭圆)是一个没有背景和黑色边框旋转的div,我通过在顶部添加另一半红色圆圈来实现环在行星后面的效果. 这是JSFiddle及以下是一个片段演示. .elipse { width: 300px; height: 105px; background: none; border-radius: 50%; 我正试图制作一个带环的星球,就像这张照片一样

我目前正在做一些看起来很脏的方式.环(椭圆)是一个没有背景和黑色边框旋转的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 ></div>  <div class='elipse'></div>  <div ></div></div>

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

解决方法 使用SVG：

我通常建议使用SVG来实现这样的效果/形状,因为使用SVG绘制弧更容易. SVG元素的z-index取决于它们在DOM中出现的顺序.因此,控制订单也更容易. SVG本质上也是响应式的.

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

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

<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,25 0 1 0 102.5,100)' /></svg>

使用CSS：

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

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

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

总结

以上是内存溢出为你收集整理的HTML – 使用CSS实现具有环效果的行星全部内容，希望文章能够帮你解决HTML – 使用CSS实现具有环效果的行星所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。