css3背景大小覆盖到动画缩放百分比 [英] css3 background-size cover to percentage animation zoom
问题描述
我正在尝试使用背景尺寸制作缩放效果。我的问题是我需要从background-size:cover设置动画,例如background-size:105%。
Im trying to make a zoom effect with background-size. The issue I have is I need to animate from background-size:cover to something like background-size: 105%.
当我尝试使用过渡:0.1s背景尺寸线性进行动画处理时,它的动画从0到104%。
When I try this it with a "transition: 0.1s background-size linear" it animates from 0 to 104%.
无论如何,我可以将覆盖率动画化为该百分比,而不会返回到0。
Is there anyway I can animate from cover to that percentage with out going back to 0.
(即使用覆盖率,因为我不知道大小图片,但我有固定的div尺寸来显示它。)
(im using cover because I don't know the size of the image but I have a fixed size div to display it in.)
感谢
Pete
Thanks Pete
推荐答案
一种可能性是将背景设置在伪元素中,然后对基础元素进行缩放。 (例如,通过转换属性)
One posibility is to have the background set in a pseudo element, and then do the zoom in the base element. (thru transform property, for instance)
.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>
这篇关于css3背景大小覆盖到动画缩放百分比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!