html dv隐藏,html - How to show an animation that is hidden behind a colored div using a "reveal" div o...

A techhnique that will work, with an even simpler layout, is box-shadow

.layer1 {

width: 100%;

height: 100%;

position: absolute;

background-image: linear-gradient(yellow, blue);

background-size: 200% 200%;

animation: bkg 2s infinite alternate;

background-origin: padding-box;

}

.layer2 {

width: 200px;

height: 200px;

position: absolute;

background: transparent;

border-radius: 30px;

left: 20px;

top: 40px;

box-shadow: 0px 0px 0px 10000px blue;

}

@keyframes bkg {

from {

background-position: 0 0;

}

to {

background-position: 100% 100%

}

}

Also, you have a posibility to achieve this using blending.

The main disadvantage is that this uses hard-light , son the colors used in layer2 are limited to having 0 or 255 for the primary colors (red blue and green).

It will work for pure red (255, 0,0), green (0, 255, 0), blue (0, 0, 255), and also (255, 255, 0), (255, 0, 255), (0, 255, 255)

But it has the advantage that you can set severial divs to act as windows

.layer1 {

width: 100%;

height: 100%;

position: absolute;

background-image: linear-gradient(yellow, blue);

background-size: 200% 200%;

animation: bkg 2s infinite alternate;

background-origin: padding-box;

}

.layer2 {

width: 100%;

height: 100%;

position: absolute;

background: rgba(0, 255, 0);

mix-blend-mode: hard-light;

}

.layer3 {

width: 200px;

height: 200px;

position: absolute;

background: grey;

border-radius: 30px;

left: 20px;

top: 40px;

}

@keyframes bkg {

from {

background-position: 0 0;

}

to {

background-position: 100% 100%

}

}

This will work also for multiple divs:

.layer1 {

width: 100%;

height: 100%;

position: absolute;

background-image: linear-gradient(yellow, blue);

background-size: 200% 200%;

animation: bkg 2s infinite alternate;

background-origin: padding-box;

}

.layer2 {

width: 100%;

height: 100%;

position: absolute;

background: rgba(0, 255, 0);

mix-blend-mode: hard-light;

}

.layer3 {

width: 200px;

height: 200px;

position: absolute;

background: grey;

border-radius: 30px;

left: 20px;

top: 40px;

}

.layer3:nth-child(2) {

left: 120px;

top: 80px;

}

@keyframes bkg {

from {

background-position: 0 0;

}

to {

background-position: 100% 100%

}

}