javascript - 如何在浏览器宽度上重复一个圆圈

Question

我用 css 和 html 创建了圆圈，我想让它在浏览器的 x 维度上重复(尝试复制如下所示的图像)。我知道有 background-image: x-repeat，但这不是背景图片，所以我不能使用它，而且圆圈内也会有内容。我最初尝试创建 9 个圆圈，然后绝对定位它们，但我意识到这可能不是最好的方法，并且如果浏览器缩小，将无法工作。然后记住了 repeat-x 属性。这是我最初思路的代码: HTML 代码

<div class="circles">
          <div id="half-circle1"></div>
          <div id="circle1"></div>
          <div id="circle2"></div>
          <div id="circle3"></div>
          <div id="circle4"></div>
          <div id="circle5"></div>
          <div id="circle6"></div>
          <div id="circle7"></div>
          <div id="half-circle2"></div>
        </div><!-- end of circles -->

CSS 代码

.circles div { width: 199px; height: 199px; background-color: #60c5ca; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0; left: 0;  }

    #half-circle1 { top: 255px; left: 0px;; width: 100px; border-radius:0 100px 100px 0; opacity: 0.6;}
    #half-circle2 { top: 0; left: 0; width: 100px;  border-radius: 100px 0 0 100px; opacity: 0.6;  }

    #circle1 { top: 235px; left: 50px; opacity: 0.5; }
    #circle2 { top: 285px; left: 200px; opacity: 0.6; }
    #circle3 { top: 235px; left: 300px; opacity: }
    #circle4 { top: 235px; left: 300px; opacity: }
    #circle5 { top: 235px; left: 300px; opacity: }
    #circle6 { top: 235px; left: 300px; opacity: }
    #circle7 { top: 235px; left: 300px; opacity: }

Answer 1

您可以使用 css calc() 和 vw, vh 单位

.circles div {
  width: 199px;
  height: 199px;
  background-color: #60c5ca;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

#half-circle1 {
  top: 255px;
  left: calc(0vw);
  width: 100px;
  border-radius: 0 100px 100px 0;
  opacity: 0.6;
}

#half-circle2 {
  top: 235px;
  left: calc(90vw + 50px);
  width: 100px;
  border-radius: 100px 0 0 100px;
  opacity: 0.6;
}

#circle1 {
  top: 235px;
  left: calc(10vw - 50px);
  opacity: 0.5;
}

#circle2 {
  top: 285px;
  left: calc(20vw);
  opacity: 0.6;
}

#circle3 {
  top: 235px;
  left: calc(30vw);
  opacity: 0.7;
}

#circle4 {
  top: 235px;
  left: calc(40vw);
  opacity: 0.5;
}

#circle5 {
  top: 235px;
  left: calc(50vw);
  opacity: 0.5;
}

#circle6 {
  top: 235px;
  left: calc(60vw + 50px);
  opacity: 0.6;
}

#circle7 {
  top: 235px;
  left: calc(70vw + 100px);
  opacity: 0.7;
}

<div class="circles">
  <div id="half-circle1"></div>
  <div id="circle1"></div>
  <div id="circle2"></div>
  <div id="circle3"></div>
  <div id="circle4"></div>
  <div id="circle5"></div>
  <div id="circle6"></div>
  <div id="circle7"></div>
  <div id="half-circle2"></div>
</div>

jsfiddle https://jsfiddle.net/Lu1xwkre/1/