gpt4 book ai didi

css3 background-size cover to percentage 动画缩放

转载 作者:技术小花猫 更新时间:2023-10-29 11:09:33 26 4
gpt4 key购买 nike

我正在尝试使用背景大小制作缩放效果。我遇到的问题是我需要从 background-size:cover 到类似 background-size: 105% 的动画。

当我用“transition: 0.1s background-size linear”尝试它时,它会在 0 到 104% 之间设置动画。

无论如何我可以从覆盖到那个百分比的动画而不回到 0。

(我使用封面是因为我不知道图像的大小,但我有一个固定大小的 div 来显示它。)

谢谢皮特

最佳答案

一种可能性是在伪元素中设置背景,然后在基本元素中进行缩放。 (例如,通过 transform 属性)

.test { 
width: 300px;
height: 300px;
position: relative;
left: 30px;
top: 30px;
transition: all 1s;
}

.test:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.test:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: url("http://lorempixel.com/600/400");
background-size: cover;
}
<div class="test">
</div>

Demo

关于css3 background-size cover to percentage 动画缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17493417/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com