使用jQuery添加類和圖像

我有一個標誌，不得不將其分割成頂部和底部部分，試圖實現徽標底部的旋轉效果。使用jQuery添加類和圖像

主要目標是採取我的標誌的底部鋸片部分，並使其旋轉/旋轉懸停。

我可以讓它旋轉/旋轉，但由於標誌分爲兩部分。我必須使用z-index堆疊圖像，並且由於頂部圖像阻擋底部圖像，因此當底部圖標低於頂部圖像時底部圖標不會旋轉。

我試過使用jquery來解決問題，但還沒有熟悉編碼。

有人可以看看這個CodePen並幫助我。

這裏是鏈接到筆/代碼：http://codepen.io/daugaard47/pen/yKrdD

如果顛倒了的z-index你可以看到旋轉作用。

謝謝。 -Chris

來源

2013-06-02 cwd

你能創建一個演示提琴嗎？ –

不能在計算機上懸停，但爲什麼不讓頂部圖像的下半部分透明？ – mplungjan

整潔的設計！

繼承人的工作版本 http://codepen.io/patrickkettner/pen/byFIl

你是非常接近 - 只是一對夫婦的調整。將：懸停偵聽器添加到包裝中，這樣您就不必擔心堆疊。其次，爲動畫元素添加一個gpu hack（我使用translateZ），以防止從元素跳轉到gpu的任何閃爍被動畫，然後回到cpu到其靜止狀態（查看http://www.youtube.com/watch?v=8uAYE5G1gSs瞭解更多信息，比你更多需要了解該主題）。

來源

2013-06-02 05:16:20 Patrick

非常感謝！一直想弄明白這一個整夜。真的很感激它。 – cwd

檢出了該視頻。理解了他們正在談論的地獄的三分之一，（哈哈），但非常有趣。再次感謝。 – cwd

@帕特里克多一個問題，不同的主題希望我不會被標記爲改變主題，但我一直在努力爲我的.svg創建備份.png。你會如何去做這件事？您可以使用相同的地址的圖像，只需添加.png擴展名而不是.svg – cwd

使用jQuery添加類和圖像

回答

相關問題