图像边界半径在 css 过渡期间不起作用

2022-01-22 00:00:00 hover css blur flicker

我正在使用 border-radius: 50%; 来制作圆形图像.默认情况下，图像是模糊和缩放的(带有隐藏的溢出)，悬停时它将消除模糊和缩放.但是，当我在元素上使用 CSS 过渡时，它会在过渡期间暂时显示溢出.

I'm using border-radius: 50%; to make an image round. By default the image is blurred and zoomed (with a hidden overflow) and on hover it will remove the blur and zoom. However, when I use a CSS transition on the element, it temporarily shows the overflow for the duration of the transition.

http://jsfiddle.net/jonny_me/cyvL61qx

推荐答案

我相信在过渡时，元素会从文档流中取出，类似于阴影 position: relative; 并放回动画完成后.

I believe on transition, the element gets taken out of document flow, something like a shadow position: relative; and put back in once the animation is complete.

如果强制父级的z-index高于子级，父级应继续裁剪溢出.

If you force the z-index of the parent to be higher than that of the child, the parent should continue to clip the overflow.

http://jsfiddle.net/cyvL61qx/4/

figure.effect-park {
    background-color: #0D4C16;
    border-radius: 50%;
    z-index: 1;
}

figure.effect-park img {
    z-index: 0;
    opacity: 0.5;
    -webkit-filter: blur(1.5px);
    filter: blur(1.5px);
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}

相关文章