我看过this page（镀铬版），我想知道那个下降并改变颜色的圆圈。我正在尝试做类似的事情，我陷入了从橙色背景的粉色圆圈到白色背景的绿色圆圈的过渡。我尝试了两种策略。
A） 使用位置：粘性； +将一层隐藏在另一层之下并进行适当的协调，请参见下面的代码。问题在于，这仅适用于其中一个圈子（一个“出现”的圈子），而不适用于“隐藏”的一个圈子；所以效果不一样。
.yellowbanner {
background-color: yellow;
height: 500px;
width: 500px;
z-index: 2;
position: sticky;
top:50px;
left:0px;
border-radius: 100%;
}
.orangebanner {
background-color: orange;
height: 500px;
width: 500px;
z-index: 21;
position: sticky;
top:50px;
left:0px;
border-radius: 100%;
}
.greenbanner {
background-color: mediumspringgreen;
height: 1000px;
width: 100%;
z-index: 3;
position: relative;
top:500px;
left:0px;
}
.bluebanner {
background-color: blue;
opacity: 1;
height: 1500px;
width: 100%;
z-index: 1;
position: relative;
top:0px;
left:0px;
}
.redbanner {
background-color: white;
height: 3000px;
width: 100%;
z-index: -2;
position: absolute;
top:0;
left:0px;
}<!DOCTYPE html>
<html>
<head>
<title>DevProject</title>
<link href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="greenbanner"><div class="yellowbanner"></div></div>
<div class="redbanner"></div>
<div class="bluebanner">
<div class="orangebanner"></div>
</div>
</body>
</html>
B）：使用位置：固定； +一些JS 。但是，我发现的所有内容都会改变整个圆圈的颜色（在某个时刻），而不仅仅是改变其适当的部分。
谢谢