我有一个带有背景图片的 div。当它有简单的变换比例动画时,它开始在 Google Chrome 和 Opera 中闪烁。 这是一个简单的例子:
http://codepen.io/anon/pen/bWpNYq
CSS:
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-color: #f00;
background-position: 50% 50%;
background-image: url(".....jpg");
background-size: cover;
}
脚本:
TweenLite.set('div', {
backfaceVisibility: 'hidden',
perspective: 1000
});
TweenLite.fromTo('div', 10, {
scale: 1.1
}, {
scale: 1
});
当图像是一个简单的 img 元素时,相同比例的动画效果很好。过渡平稳:
http://codepen.io/anon/pen/pPyvdp
示例使用 GASP 制作动画。我需要一个使用 GSAP 缩放 div 以获得更好结果的解决方案。
你知道如何使背景图像平滑吗?
最佳答案
试试这个:
添加 transition: all 1s linear;
使其平滑缩放。
body {
height: 100vh;
overflow: hidden
}
div {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
background-size: cover;
transition: all 1s linear;
}
关于javascript - 缩放背景图像时,它开始在 Chrome 中闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43519112/