我正在尝试在进入视口时运行过渡。我希望卡片只是不透明......我的 div 中有一个代理元素,应用了背景过滤器以应用“磨砂玻璃”外观。当父级有任何类型的不透明度更改时,过滤器根本不会应用并导致笨拙的动画。这是上下文的CSS:
.card {
width: 100%;
position: relative;
min-height: 320px;
border-radius: 12px;
overflow: hidden;
padding: 32px 24px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
max-width: 45rem;
margin: 8px 0;
transition: all 0.4s ease;
.backdrop {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
border-radius: 12px;
backdrop-filter: blur(32px) brightness(115%);
background-color: rgba(255, 255, 255, 0.16);
}
}
我也尝试对孩子应用过渡,还尝试将以下内容应用于父母和背景:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;