javascript - 在纯 CSS 中仅缩放图像的特定部分

Question

我有一个宽度为 800 像素、高度为 300 像素的 div。
我还有一个 .svg 图像设置为该 div 的背景图像，并使用 css3 动画使该图像从左向右滚动，无限期(它是横向)和环绕。

我想在这个 div 的中间放一个圆圈，并让这个圆圈的内部“缩放”背景。我很想拥有这个纯 CSS。

我尝试了一些 mask 和剪裁，但似乎没有任何效果。

这在当前的 CSS 规范中是否可行？ JavaScript 解决方案也是可以接受的。

这是一张展示我的意思的图片:

如果仔细看，可以看到中间有一个圆圈，应该是放大了后面的云层，就像是在用放大镜看一样。

Answer 1

试图让它重用相同的动画，没有额外的元素:

CSS

.test {
   position: absolute;
   width: 600px;
   height: 400px;
   left: 0px;
   background-image: url(http://placekitten.com/1000/400);
   background-size: 1000px;
   -webkit-animation: base linear 20s infinite; 
   background-position-x: 0px;
   background-position-y: 50%;
}

.test:after {
    content: "";
    position: absolute;
    left: 200px;
    width: 200px;
    top: 100px;
    height: 200px;
    border-radius: 50%;
    background: inherit;
    -webkit-transform: scale(1.1);
    -webkit-animation: inherit;
    -webkit-animation-delay: -4s;
}


@-webkit-keyframes base {
     0% {     background-position-x: 0px;       }
   100% {    background-position-x: -1000px;    }
}

诀窍是将动画设置为同步延迟它；只需计算 x 偏移量在时间上的等效性即可。

fiddle