我在transform scaleY
上使用div
动画,以便以低廉的价格制作动画,但如果应用了box-shadow
则效果不佳。< / p>
div {
width: 300px;
height: 100px;
transform: scaleY(1);
transition: all 2000ms;
transform-origin: 0 0;
background-color: yellow;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
div:hover {
transform: scaleY(5);
}
<div></div>
你可以看到盒子阴影也被缩放了。不仅如此,而且它在动画结束时捕捉,看起来很难看。
有关如何在不缩放阴影时保持这个快速60fps transform
动画的任何建议吗?
动画高度可以获得理想的效果,但它在移动设备上落后很多。
将阴影应用于div::after
伪元素并转换div
不起作用,因为阴影也会缩放。
答案 0 :(得分:0)
你必须在这里使用另一个元素。在元素上使用transform会影响其子元素,并且:after,:在伪元素之前。阴影必须在上面的元素中才能使用变换。您可以尝试在伪选择器中使用scaleY(1)和scale(-X),但这不可靠。
div {
width: 300px;
height: 100px;
z-index: 1;
position: relative;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
div span {
transform: scaleY(1);
transition: all 2000ms ease;
transform-origin: 0 0;
background-color: yellow;
display: block;
width: 300px; height: 100px;
}
div:hover span {
transform: scaleY(5);
}
<div><span></span></div>