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

Question

我有一个宽度为800，高度为300像素的div 我还有一个.svg图像被设置为这个div的背景图像，并使用css3动画我使这个图像从左到右滚动，无限期（它是一个风景）和包装。

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

我已经尝试了一些遮蔽和剪裁，但似乎没有什么可以做到的。

目前的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

Answer 2

将缩放div放入pic div，并为其提供相同图像的较大版本的背景图像。