Html 使用剪辑边框翻译图像

我试图找到一种方法，如何在给定的多边形边界内转换图像（如下所示）。当图像在这个边界上时，我想剪切图像的这一部分。我尝试使用clip（过时的，没有任何多边形形状）和clip path（剪切图像本身，而不是图像中的边框应该移动）命令，但直到现在都没有任何有用的结果

现在，我的盒子的代码片段及其所有内容：

<div id="box">
    <span class="b0"><img src="..."></span>
</div>

我的动画是这样给出的：

#box .b0
{
    webkit-transform : animate1 30s 0s infinite;
}

@keyframes animate1
{
    0% { -webkit-transform : translateX(0px); }
    100% { -webkit-transform : translateX(-100px); }
}

---

所有这些关键帧都针对不同的浏览器类型进行了修改，它们可以正常工作。现在，我希望这个动画图像在给定的多边形边界内平移，如示例（a）中所示。在示例（b）中，您可以看到当前结果，但该结果不起作用。

使其起作用。如果您有圆角或切边，而

webkit浏览器没有，那么firefox

似乎确实应用了

overflow:hidden

我为你的问题找到了一个解决办法——可能有点麻烦，但这是一个解决办法。您可以在此处找到参考资料：

下面是正在实施的解决方案：

@-webkit关键帧动画{
0%{transform:translateX（-130px）；}
100%{transform:translateX（230px）；}
}
@-moz关键帧设置动画{
0%{transform:translateX（-130px）；}
100%{transform:translateX（230px）；}
}
@关键帧设置动画{
0%{transform:translateX（-130px）；}
100%{transform:translateX（230px）；}
}
#盒子{
背景色：番茄；
宽度：300px；
左边距：50像素；
边框顶部：10px红色；
右边框：10px蓝色；
溢出：隐藏；
-moz边界半径：50%；
-webkot边界半径：50%；
边界半径：50%；
/*这修复了溢出：隐藏在Chrome中*/
-webkit掩码图像：url（数据：image/png；base64，ivborw0kgoaaaansuhueugaaaaaaaabcaiaacqd1peaaagxrfwhrtb2z0d2fyzqbbzg9izbwfnzvjlywr5ccllpaaaa5jrefuenpiygbgaagaagwaaaaaaaaaaaaaabcaiaacqd1peaaagxrfwhrtb2z0d2fyzqbbzg9izbwfwfnzvjlywcllpaaaa5j；
}
#方框b0{
显示：内联块；
边框：1px黑色虚线；
-webkit动画：为2s无限制作动画；
-moz动画：为2s无限动画；
动画：动画；
}

---

webkit旁边缺少一个“-”，您在这里声明#box.b0-我试图重建您的问题。非常感谢，这正是我搜索过的！（：顺便说一句，我是手工写代码的，之前我忘了负号-webkit。再次感谢你抽出时间来解决它！）；