如何在CSS中为月亮的尽头添加弯曲度[已关闭]-解网

问：

想改进这个问题吗？通过编辑这篇文章添加详细信息并澄清问题。

昨天关闭。

改进此问题

Aoa在那里！我已经用html和css编写了一个代码，我几乎完成了代码，但我遇到了一个问题，那就是如何为月亮的尽头添加弯曲度。我提供了一张图片，这是我想要的最终结果，并提供了我到目前为止尝试过的代码。

body{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loader {
    background: url("https://i.ibb.co/YPM06Ns/TEST-removebg-preview.png") center/contain no-repeat;
  }
  
  .loader {
    position: relative;
    height:65px;
    width: 65px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  .loader .dbl-spin-1,
  .loader .dbl-spin-2 {
    position: absolute;
    box-sizing: border-box;
    display: block;
    margin: auto;
    border-radius: 50%;
  }
  .loader .dbl-spin-1 {
   transform: translateY(-12px);
    height: 90px;
    width: 90px;
    border-top: 9px solid #9575cd;
    border-left: 9px solid #9575cd;
    border-radius: 75%;
    -webkit-animation: loader-4-dblspin 5.8s linear infinite;
            animation: loader-4-dblspin 5.8s linear infinite;
  }
  .loader .dbl-spin-2 {
    padding: 0;
    margin: 0;
    height: 116px;
    width: 116px;
    border-bottom: 11px solid #6a1b9a;
    border-left: 11px solid #6a1b9a;
    border-radius: 50%;
    -webkit-animation: loader-4-dblspin2 3.6s linear infinite;
            animation: loader-4-dblspin2 3.6s linear infinite;
  }
  
  @-webkit-keyframes loader-4-dblspin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-720deg);
    }
  }
  
  @keyframes loader-4-dblspin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-720deg);
    }
  }
  @-webkit-keyframes loader-4-dblspin2 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes loader-4-dblspin2 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

<div class="loader">
        <div class="dbl-spin-1"></div>
        <div class="dbl-spin-2"></div>
</div>

我几乎完成了代码。但我面临的一个问题是我在那张照片中提供的图片，更大的月亮末端与内月亮合拢。在我的代码中，一切都完全相同，只是没有找到最小化卫星之间差距的解决方案。

html -动画 css-loader border-radius

如何在CSS中为月亮的尽头添加弯曲度[已关闭]

how to add bendiness to the end of moon in css [closed]

评论