9

background-size でズーム効果を作ろうとしています。私が抱えている問題は、background-size:cover から background-size: 105% のようなものにアニメーション化する必要があることです。

「transition: 0.1s background-size linear」でこれを試してみると、0 から 104% までアニメーション化されます。

とにかく、0に戻らずにカバーからそのパーセンテージまでアニメーション化できるものはありますか.

（画像のサイズがわからないのでカバーを使用していますが、表示する固定サイズのdivがあります。）

ありがとうピート

4

1 に答える 1

9

可能性の 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>

デモ

于 2013-07-09T20:10:25.700 に答える