如何显示使用表面上的“显示” div隐藏在彩色div后面的动画

Question

假设我们有两层背景。

底层为绿色<div class="green"></div>。为简单起见，我们假设它只是一种颜色。但是在我的项目中，该层包含一个css动画。
然后另一层蓝色<div class="blue"></div>。
我能想到的最接近的例子是，如果您想象一个聚光灯。一切看起来都是黑色的，聚光灯四处移动并显示背景。

基本上，这就是我所拥有的：

div

它将看起来像这样。请记住，绿色层是我项目中的动画。

<div class="green">
    <div class="blue">
        <div class="reveal"></div>
    </div>
</div>

问题：

如何完成

样式以实现上述行为。

第一格-绘制.reveal背景（动画）

.green

Third / Fourth / ... divs-同时位于这两个位置，但可以显示背景.blue绘制的内容
注意：第一和第二格覆盖了可用宽度和高度的First div。
100%

P.S。我发现有一种方法我根本不喜欢。

.green {
    background-color: #159c82;
    width: 100vw;
    height: 100vh;
}

.blue {
    background-color: #1b4287;
    // I could change this to a sibling div and use,
    // position: absolute; but that seems unnecessary
    width: 100%;
    height: 100%;
}

.reveal {
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
    height: 50px;
    // not sure what else to put here to make it work
}

<div class="green">
    <div class="blue">
        <div class="reveal"></div>
    </div>
</div>

假设我们有两层背景。底层为绿色

。为简单起见，我们假设它只是一种颜色。但是在我的项目中，该层包含...

Answer 1

另一答案

Answer 2

另一答案

Answer 3

另一答案

Answer 4

另一答案