0

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

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

<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) 中看到的一样。在示例 (b) 中，您会看到当前结果，该结果不起作用。

4

1 回答 1

0

得到它的工作。如果您有圆形或切割边缘，似乎firefox确实适用，但是。overflow: hiddenwebkit browsers don't

我为您的问题找到了一种解决方法 - 可能有点笨拙，但它是一个解决方案。您可以在此处找到参考：stackoverflow 参考帖子

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

@-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>

我希望我能提供你正在寻找的东西。

此致

于 2015-07-20T20:32:43.313 回答