当我更改模糊滤镜时,图像会颤抖一下。
这是jsfiddle的演示。请在演示时单击两次按钮
body {
background-color: #000;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
z-index: -1;
background: url(https://static01.nyt.com/newsgraphics/2017/12/26/2018-1-olympics-climate/assets/images/469466931-1254.jpg) center no-repeat;
background-size: cover;
transition: filter 2s;
}
body.blurred::before {
filter: blur(30px);
}
我在配备非视网膜显示屏的 Mac 上使用 Chrome 63.0.3239.84。
我看到很多类似的问题,但没有一个答案可以帮助我
图像在悬停时移动 - 镶边不透明度问题
CSS 过渡效果使图像模糊/将图像移动 1px,在 Chrome 中?
我逐步
使用过渡作弊问题,不顺利
transition-timing-function: steps(10, end);
它不是解决,而是作弊,不能应用于任何地方。
我无法解释,但它对我有用。
https://jsfiddle.net/tuzae6a9/6/