css3背景大小覆盖百分比动画缩放

Question

我试图用背景大小制作缩放效果.我遇到的问题是我需要从背景大小设置动画:覆盖到背景大小:105%.

当我尝试使用"过渡:0.1秒背景大小线性"时,它的动画从0到104%.

无论如何,我可以从封面到该百分比动画,而不会回到0.

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

谢谢皮特

Answer 1

一个可能性是将背景设置在伪元素中,然后在基本元素中进行缩放.(通过转换属性,例如)

.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>

演示