我有一张简单的卡片,可以在悬停时放大.卡片文本背景模糊.当我在卡片上悬停时,转换过程很平稳,但文本容器的底部边缘似乎在闪烁.
.card{
width: 200px;
height: 250px;
border-radius: 10px;
transition: transform 0.5s;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
margin: 50px;
transition: transform 0.5s;
will-change: transform;
}
.card:hover{
transform: scale(1.05);
}
.card-details{
background-color: rgb(255 255 255/60%);
backdrop-filter: blur(5px);
padding: 15px;
font-size: 30px;
}
<div class="card">
<div class="card-details">
Lorem Ipsum
</div>
</div>
有什么建议吗?