使用畫布動畫作爲背景

我製作了一個我想用於網站背景的翻轉動畫。我已將畫布大小設置爲1280 * 800並將其保存爲網頁。我嘗試使用iframe，並讓瀏覽器將其縮放（100％; 100％），但效果不佳。由於正文設置爲950px和自動頁邊距，因此iframe只會與左側一致，並且iframe不會隨着放大/縮小而縮放。使用畫布動畫作爲背景

有沒有比使用iframe更好的方法來做到這一點？ PHP還是JS？

我將動畫保存爲一個單獨的網頁的原因是因爲我覺得我讓它有太多的線條（〜1100），基本上有20個左右的翻轉動畫，我不知道一個更好的方法，除了單獨做它們並使用風格來放置它們。

來源

2011-02-28 Lei

請告訴我您的網站地址，以便我可以在我的機器上將其列入黑名單。聽起來像它會給我癲癇發作。 – Greg 2011-02-28 16:31:36

請輸入密碼！你還想達到什麼目的？有幾件事聽起來錯了。 – 2011-02-28 16:35:26

您是否在背景中使用畫布動畫在手機上實現了平滑的動作？ – svassr 2013-11-29 17:24:12

如果我正確理解您的問題，您需要將canvas元素添加到具有#canvasDiv { position:fixed; top:0px; left:0px; z-index:1; }的div層，並提供其他所有其他z-index爲2或更大的div。

結帳http://paulirish.com/ 查看了解如何做到這一點的一個很好的代碼示例。

來源

2011-02-28 22:35:30 AJMaxwell

謝謝你的實際答案！我已經知道了，實際上這不是問題。我只在背景div上將z-index設置爲-1，因爲我相信所有其他的默認值都是0。但感謝您的鏈接，這是另一個幫助我：http://radikalfx.com/2009/10/17/html5-animated-background/ – Lei 2011-03-02 16:26:55

不知道這是否是一個問題，但設置爲負面z-index會導致它低於可點擊空間。所以如果它是一個交互式的Canvas元素，他們將無法與之交互。只是一句警告:-) – AJMaxwell 2011-03-08 17:47:42

使用畫布動畫作爲背景

回答

相關問題