使用剪貼邊框來翻譯圖片

-1

我試圖找到一種方法，如何在給定的多邊形邊框內翻譯圖片（如下所示）。當圖像在這個邊界上時，比我想要剪切這部分圖像。我試圖使用剪輯（過時並沒有任何多邊形形狀）和剪輯路徑（剪切圖像本身，而不是圖像中的邊框應該移動）命令，但直到現在沒有任何有用的結果。使用剪貼邊框來翻譯圖片

現在，我的盒子與所有的代碼片斷它的內容：

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

我的形象與WebKit的變換命令在CSS這樣翻譯：

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

與我的動畫是這樣給出的：

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

所有這些關鍵幀被修改爲不同的瀏覽類型，他們工作沒有任何問題。現在我想讓這個動畫圖像在給定的多邊形邊界內進行平移，就像例子（a）中的HERE。在例子（b）中你看到當前的結果，這是行不通的。

來源

2015-07-20 MANiC

有一個「 - 」旁邊的WebKit缺少其中u聲明#box .b0 - 我試圖重建您的問題。 –

得到它的工作。看起來像firefox確實適用overflow: hidden如果您有圓形或切邊但webkit browsers don't。

我找到了解決問題的辦法 - 可能會有些不方便，但它是一個解決方案。下面你可以看到在行動解決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>

我希望我能提供什麼樣的，你正在尋找您可以在這裏找到參考。

問候

來源

2015-07-20 20:32:43

非常感謝你，這是**我正在尋找的**！（ - ： P.s.我用手寫的代碼，我忘了-webkit之前的減號，再次感謝你的時間，你找到了它！（; – MANiC

@MANiC，歡迎您:) –

使用剪貼邊框來翻譯圖片

回答

相關問題