问题描述
我正在使用 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;
}
这篇关于图像边界半径在 css 过渡期间不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！