Question

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

现在，我的包装盒的代码片段包含所有内容：

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

我在css中使用webkit-transform命令翻译图像：

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

我的动画是这样给出的：

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

所有这些关键帧都针对不同的浏览器类型进行了修改，它们的运行没有任何问题。现在我希望这个动画图像在给定的多边形边界内翻译，就像你在例子（a）中看到HERE一样。在示例（b）中，您可以看到当前结果，该结果无效。

Answer 1

搞定了。如果您有firefox的边缘或边缘，则overflow: hidden似乎会应用webkit browsers don't。

我找到了解决问题的方法 - 可能有点hacky但它是一个解决方案。您可以在此处找到参考：stackoverflow reference post

您可以在下面找到解决方案：

@-webkit-keyframes animate {
    0% { transform: translateX(-130px); }
    100% { transform: translateX(230px); }
}

@-moz-keyframes animate {
    0% { transform: translateX(-130px); }
    100% { transform: translateX(230px); }
}

@keyframes animate {
    0% { transform: translateX(-130px); }
    100% { transform: translateX(230px); }
}

#box {
    background-color: tomato;
    width: 300px;
    margin-left: 50px;
    border-top: 10px red;
    border-right: 10px blue;
    overflow: hidden;
    -moz-border-radius: 50%;
    -webkot-border-radius: 50%;
    border-radius: 50%;
    /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#box .b0 {
    display: inline-block;
    border: 1px dashed black;
    -webkit-animation: animate 2s infinite;
    -moz-animation: animate 2s infinite;
    animation: animate 2s infinite;
}

<div id="box">
    <span class="b0"><img src="http://png-5.findicons.com/files/icons/547/sport/128/tennis_ball.png"/></span>
</div>

我希望我能提供你想要的东西。

祝你好运

使用剪辑边框翻译图像

1 个答案: