css - 如何伪造用html和css制作的假球体的颜色“表面”

Question

我正在尝试仅在 html 和 css 中从头开始创建一个球体

我可以创建多个 div，对它们应用边框半径，然后旋转它们，使它们产生球体的错觉，但问题是目前它只是用 div 的边界创建的“网格”。我将如何在空间之间着色？

这是我到目前为止得到的https://codepen.io/jaypitti/pen/zYBMdeG

html

    <div class="Sphere">
        <div class="SphereMesh"></div>
        <div class="SphereMesh"></div>
        <div class="SphereMesh"></div>
        <div class="SphereMesh"></div>
        <div class="SphereMesh"></div>
        <div class="SphereMesh"></div>
    </div>

css

.Sphere {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.0);
  width: 25rem;
  height: 25rem;
}

.SphereMesh {
  border-radius: 50%;
  position: absolute;
  border: 5px solid black;
  background-color: rgba(1,75,236,0.1);
  width: 100%;
  height: 100%;
}

.SphereMesh:nth-child(1) {
  transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
  animation: 5s rotateChild1 linear infinite;
}

.SphereMesh:nth-child(2) {
  transform: rotateX(0deg) rotateY(60deg) rotateZ(0deg);
  animation: 5s rotateChild2 linear infinite;
}

.SphereMesh:nth-child(3) {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  animation: 5s rotateChild3 linear infinite;
}

.SphereMesh:nth-child(4) {
  transform: rotateX(0deg) rotateY(120deg) rotateZ(0deg);
  animation: 5s rotateChild4 linear infinite;
}

.SphereMesh:nth-child(5) {
  transform: rotateX(0deg) rotateY(150deg) rotateZ(0deg);
  animation: 5s rotateChild5 linear infinite;
}

.SphereMesh:nth-child(6) {
  transform: rotateX(deg) rotateY(180deg) rotateZ(0deg);
  animation: 5s rotateChild6 linear infinite;
}

@keyframes rotateChild1 {
  0% { -webkit-transform: rotateX(0deg) rotateY(60deg) rotateZ(0deg); border-right: 5px solid blue; border-left: 5px solid green;}
  100% { -webkit-transform: rotateX(0deg) rotateY(390deg) rotateZ(0deg); border-right: 5px solid green; border-left: 5px solid blue;}
}

@keyframes rotateChild2 {
  0% { -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg); border-right: 5px solid blue; border-left: 5px solid green;}
  100% { -webkit-transform: rotateX(0deg) rotateY(420deg)rotateZ(0deg) ; border-right: 5px solid green; border-left: 5px solid blue;}
}

@keyframes rotateChild3 {
  0% { -webkit-transform: rotateX(0deg) rotateY(120deg) rotateZ(0deg); border-right: 5px solid blue; border-left: 5px solid green;}
  100% { -webkit-transform: rotateX(0deg) rotateY(450deg) rotateZ(0deg); border-right: 5px solid green; border-left: 5px solid blue;}
}

@keyframes rotateChild4 {
  0% { -webkit-transform: rotateX(0deg) rotateY(150deg) rotateZ(0deg); border-right: 5px solid blue; border-left: 5px solid green;}
  100% { -webkit-transform: rotateX(0deg) rotateY(480deg) rotateZ(0deg); border-right: 5px solid green; border-left: 5px solid blue;}
}

@keyframes rotateChild5 {
  0% { -webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg); border-right: 5px solid blue; border-left: 5px solid green;}
  100% { -webkit-transform: rotateX(0deg) rotateY(510deg) rotateZ(0deg); border-right: 5px solid green; border-left: 5px solid blue;}
}

@keyframes rotateChild6 {
  0% { -webkit-transform: rotateX(0deg) rotateY(210deg) rotateZ(0deg); border-right: 5px solid blue; border-left: 5px solid green;}
  100% { -webkit-transform: rotateX(0deg) rotateY(540deg) rotateZ(0deg); border-right: 5px solid green; border-left: 5px solid blue;}
}

可能有更好、更清洁的方法来完成我在上面所做的事情，所以如果你有任何批评（我相信你会的），请帮助我改进它！

我尝试这样做的方式甚至可能吗？我不太擅长css并且我正在尝试学习，所以如果有任何类似的文章或资源，您可以提供详细解释与我尝试完成的过程相同或相似的过程，请链接它！

标签： csscss-animations

Answer 1

球体中的“间隙”是由代表每条网格线的 div 引起的，从浏览器定位元素的角度来看，这些网格线的边框在实际 div 之外。

如果我们使用边框框，我们可以让浏览器在基本元素中放置边距/填充/边框，这样它就不会改变它的位置。

我们还可以通过识别每个元素都在执行相同的动画，只是在稍微不同的时间，来整理代码。

这是我尽可能整理的版本。我应该喜欢使用 CSS 变量来表示旋转时间，然后使用 calc 来表示每个动画延迟，但是，尽管我发现这些显示为示例，但它并不被视为有效值（至少在 Windows 10 上的 Edge 中）。因此，我作弊使该测试的数学变得容易，并将旋转时间设置为 6 秒，因此每个网格 div n 的动画延迟为 -(n-1) 秒。当然，这可以设置为处理您真正想要的旋转时间。不幸的是，我们似乎必须为每个孩子手工做这件事。

.Sphere {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0,0,255,0.0);
  width: 25rem;
  height: 25rem;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}


  
.SphereMesh {
  box-sizing: border-box;
  border-radius: 50%;
  position: absolute;
  border: 5px solid black;
  background-color: rgba(1,75,236,0.1);
  width: 100%;
  height: 100%;
}

.SphereMesh {
  transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
  animation: 6s rotateChild linear infinite;
}


.SphereMesh:nth-child(1) {
  animation-delay: 0s;
}

.SphereMesh:nth-child(2) {
  animation-delay: -1s;
}

.SphereMesh:nth-child(3) {
  animation-delay: -2s;
}

.SphereMesh:nth-child(4) {
  animation-delay: -3s;
}

.SphereMesh:nth-child(5) {
  animation-delay: -4s;
}

.SphereMesh:nth-child(6) {
  animation-delay: -5s;
}

@keyframes rotateChild {
  0% { -webkit-transform: rotateX(0deg) rotateY(60deg) rotateZ(0deg); border-right: 5px solid blue; border-left: 5px solid green;}
  100% { -webkit-transform: rotateX(0deg) rotateY(390deg) rotateZ(0deg); border-right: 5px solid green; border-left: 5px solid blue;}
}

        <div class="Sphere">
            <div class="SphereMesh"></div>
            <div class="SphereMesh"></div>
            <div class="SphereMesh"></div>
            <div class="SphereMesh"></div>
            <div class="SphereMesh"></div>
            <div class="SphereMesh"></div>
        </div>