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

Question

我正在尝试使用background-size制作一个缩放效果。我的问题是我需要从background-size：cover动画到类似background-size：105％的值。

当我尝试使用“transition：0.1s background-size linear”时，它从0动画到了104％。

有没有办法在不返回0的情况下从cover动画到那个百分比呢？

（我使用cover是因为我不知道图像的大小，但我有一个固定大小的div来显示它。）

谢谢 Pete

- Peter J Harrison

---

你能展示一下你的代码，或者提供一个jsfiddle吗？ - user1979270

Answer 1

一种可能的方法是在伪元素中设置背景，然后通过基本元素进行缩放（例如，通过 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>

演示

- vals

---

当前浏览器在动画期间通过background-size重新渲染图像，导致图像分辨率降低。使用transform scale可以解决这个问题。 - emrahgunduz