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

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

我想在这个div的中间放置一个圆，并使这个圆的内部“放大”背景。我想要这个纯CSS

我尝试了一些掩蔽和剪辑，但似乎没有任何效果

在当前的CSS规范中，这可能吗？JavaScript解决方案也是可以接受的

这里有一张图片显示了我的意思：

---

如果你仔细观察，你可以看到中间有一个圆圈，它可以放大它后面的云，就像通过放大镜观看一样。

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

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

尝试使其重复使用相同的动画，而无需额外元素：

CSS

诀窍是同步设置动画并延迟它；只需计算x偏移的时间等价性

---

尝试在不使用额外元素的情况下重复使用相同的动画：

CSS

诀窍是同步设置动画并延迟它；只需计算x偏移的时间等价性

---

让我直截了当地说：你想让云层在图像的某个部分上悬停时放大吗？然后你还想在它们是背景图像的时候这样做？我很确定这在CSS或JavaScript中是不可能的。您需要使用两个单独的元素，然后只缩放包含云图的元素。@Joetje50抱歉，不清楚。我希望“放大镜”保持在一个地方，而不是随着鼠标移动。它不需要明确的背景图像，它只需要滚动和包装。放大后的图像应该像现实生活中的放大镜；放大图像的一部分，即使它在移动。很多放大镜的例子（如果不是全部的话）都只是一个静态图像（没有被css动画改变）。我还看到过太多的“缩放”脚本，它们只显示大图像的一部分，而没有缩放。CSS:

缩放

或

背景大小

也许？让我直截了当地说：当云彩悬停在图像的某个部分时，你想放大吗？然后你还想在它们是背景图像的时候这样做？我很确定这在CSS或JavaScript中是不可能的。您需要使用两个单独的元素，然后只缩放包含云图的元素。@Joetje50抱歉，不清楚。我希望“放大镜”保持在一个地方，而不是随着鼠标移动。它不需要明确的背景图像，它只需要滚动和包装。放大后的图像应该像现实生活中的放大镜；放大图像的一部分，即使它在移动。很多放大镜的例子（如果不是全部的话）都只是一个静态图像（没有被css动画改变）。我还看到过太多的“缩放”脚本，它们只显示大图像的一部分，而没有缩放。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;    }
}