如何在页面上制作彩虹？

Question

我看到了以下网站：

我想知道如何创建类似的东西？彩虹效应确实让我着迷，过去 30 分钟我一直在寻找，但什么也没找到。我基本上想要从页面底部围绕的圆圈。

希望有人能帮助我。

提前致谢！

Answer 1

您可以将

background: radial-gradient

和

position: relative

用作父项，将

position: absolute

用作子项，然后使用

left

和

top

将图标放置在您想要的任何位置。如果您使用百分比，那么它将适用于各种屏幕。

div#container {
    width: 500px;
    height: 500px;
    position: relative;
    background: radial-gradient(circle at 50% 100%, red 0, blue, green, yellow, purple, orange 100%);
}

div#container span {
    position: absolute;
}

<div id="container">
    <span>1</span>
    <span style="top: 15%; left: 10%;">2</span>
    <span style="top: 25%; left: 20%;">3</span>
    <span style="top: 28%; left: 50%;">4</span>
    <span style="top: 38%; left: 65%;">5</span>
    <span style="top: 50%; left: 25%;">6</span>
    <span style="top: 50%; left: 75%;">7</span>
    <span style="top: 75%; left: 50%;">8</span>
</div>

Answer 2

如果您正在寻找纯CSS解决方案，那么正如@cornonthecob建议的那样，最好的方法是带有硬色停止的渐变方法。

请参阅下面的代码片段以获取示例实现。

body{
  margin:0px;
}
.container > div {
  height: 400px;
}
.container > div {
  background-image: radial-gradient(
    circle at bottom center,
    #ec407a,
    #ec407a 20%,
    #7e57c2 20%,
    #7e57c2 40%,
    #42a5f5 40%,
    #42a5f5 60%,
    #26a69a 60%,
    #26a69a 80%,
    #9ccc65 80%
  );
}

<div class="container">
  <div></div>
</div>