CSS过渡动画内容重叠

Question

我想问一下，我在网站上制作了一些名为Bubble的动画。 基本上，它只是在定义内容的给定空间内旋转和浮动一些盒子。 但是我有一个问题，那就是动画内容与我想显示的主要内容重叠。 例如，我有<form>输入，但是每当动画浮动到输入框时，这些框都是不可单击的。 我想将这些动画发送到背景，以免干扰主UI。 我该怎么办？

这是示例代码的JSFiddle站点。 您可以尝试在正方形浮动时单击输入表单。

谢谢

Answer 1

尝试添加css类：

pointer-events:none;

对于所有动画项目，这都可以解决问题。

Answer 2

将.bg-bubbles z-index设置为-1 。 干杯