CSS過渡動畫內容重疊

Question

我想問一下，我在網站上制作了一些名為Bubble的動畫。 基本上，它只是在定義內容的給定空間內旋轉和浮動一些盒子。 但是我有一個問題，那就是動畫內容與我想顯示的主要內容重疊。 例如，我有<form>輸入，但是每當動畫浮動到輸入框時，這些框都是不可單擊的。 我想將這些動畫發送到背景，以免干擾主UI。 我該怎么辦？

這是示例代碼的JSFiddle站點。 您可以嘗試在正方形浮動時單擊輸入表單。

謝謝

Answer 1

嘗試添加css類：

pointer-events:none;

對於所有動畫項目，這都可以解決問題。

Answer 2

將.bg-bubbles z-index設置為-1 。 干杯