[ 注意：寻找一个跨浏览器的解决方案，不会像ccprog的答案那样让背景在每一波硅胶之间短暂闪烁；理想情况下，解决方案不应该包括等待第一波结束才开始显示第二波，这样两个波浪可以同时运行。我愿意放弃动态随机化的硅胶，以得到理想的解决方案。]
有谁知道如何使橙色硅胶的第二波(.goo-two)“穿过”棕色硅胶的第一波(.goo-one)以及天蓝色容器(.goo-container)来显示或暴露红色的元素(body)或者其他处于堆叠上下文中它下面的任何元素？这种操作是否可行？
值得注意的是，我给容器(.goo-container)赋予了一个实心背景，因为我希望使用这个容器来覆盖网站其余部分的加载过程，我希望橙色硅胶(.goo-two)可以用来展示内容。这变得更加棘手，因为橙色硅胶开始滴落之前，棕色硅胶尚未完成，这将是把容器(.goo-container)的背景从skyblue更改为transparent的完美时机，虽然半透明渐变作为背景可能仍然可以用来实现此目的。(或者完全不同的事情，如复制橙色层并使用其中一个来裁剪棕色路径，另一个用于裁剪天蓝色层。)
有任何想法吗？
const
gooCont = document.querySelector('div.goo-container'),
gooOne = gooCont.querySelector('div.goo-one'),
gooTwo = gooCont.querySelector('div.goo-two'),
rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
gooCont.style.setProperty('--translateY', `translateY(-${innerWidth * 0.21 / innerHeight * 100 + 100}%)`)
generateGoo(gooOne)
function generateGoo(goo) {
const
randQty = rand(20,30),
unit = innerWidth / (randQty - 1) / innerWidth * 100
if (getComputedStyle(goo).display === 'none') goo.style.display = 'block'
for (let i = 0; i < randQty; i++) {
const
div = document.createElement('div'),
minWidthPx = innerWidth < 500 ? innerWidth * 0.1 : innerWidth * 0.05,
minMaxWidthPx = innerWidth < 500 ? innerWidth * 0.2 : innerWidth * 0.1,
widthPx = rand(minWidthPx, minMaxWidthPx),
widthPerc = widthPx / innerWidth * 100,
heightPx = rand(widthPx / 2, widthPx * 3),
heightPerc = heightPx / gooCont.getBoundingClientRect().height * 100,
translateY = rand(45, 70),
targetTranslateY = rand(15, 100),
borderRadiusPerc = rand(40, 50)
div.style.width = widthPerc + '%'
div.style.height = heightPerc + '%'
div.style.left = i * unit + '%'
div.style.transform = `translate(-50%, ${translateY}%)`
div.style.borderRadius = borderRadiusPerc + '%'
div.setAttribute('data-translate', targetTranslateY)
goo.appendChild(div)
}
goo.style.transform = `translateY(0)`
goo.childNodes.forEach(
v => v.style.transform = `translateY(${v.getAttribute('data-translate')}%)`
)
}
setTimeout(() => {
gooTwo.innerHTML = ''
generateGoo(gooTwo)
}, 2300)html,
body {
width: 100%;
height: 100%;
margin: 0;
background: red;
}
div.goo-container {
--translateY: translateY(-165%);
z-index: 1;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
background: skyblue;
}
div.goo-container > div.goo-one,
div.goo-container > div.goo-two {
width: 100%;
height: 100%;
position: absolute;
transform: var(--translateY);
filter: url('#goo-filter');
background: #5b534a;
transition: transform 2.8s linear;
}
div.goo-container > div.goo-one > div,
div.goo-container > div.goo-two > div {
position: absolute;
bottom: 0;
background: #5b534a;
transition: transform 2.8s linear;
}
div.goo-container > div.goo-two {
display: none;
transition: transform 2.8s linear;
}
div.goo-container > div.goo-two,
div.goo-container > div.goo-two > div {
background: orange;
}
svg {
/* Prevents effect on Firefox */
/* display: none; */
}<div class='goo-container'>
<div class='goo-one'></div>
<div class='goo-two'></div>
</div>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
<defs>
<filter id='goo-filter'>
<feGaussianBlur in='SourceGraphic' stdDeviation='10' result='blur' />
<feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7' result='goo' />
<feBlend in='SourceGraphic' in2='goo' />
</filter>
</defs>
</svg>
div元素，并设置不同的高度来模拟波浪/黏性物质，然后协调每个div的高度的操作，使黏性物质活跃并滑动到屏幕下方。你认为任何设备，更不用说移动设备，都能处理这个吗？我猜在移动设备上，需要的div元素要少得多，因为它们的width通常小于桌面。 - oldboy