从页面的其余部分隔离CSS动画

有一个css加载动画工作，我很高兴。有一点问题，想知道是否有人知道解决方案

这是动画当前的工作方式：

我想把整个内容都涂黑，动画达到最大尺寸后，黑屏就会消失。因此，一旦加载，整个页面将是黑色的，当然除了动画。一旦动画达到最大大小，所有内容都会出现

有什么想法吗？我真的很感激。玩得开心，只需要完善一些东西。谢谢

html

检查

最初，我将body background设置为黑色

body { background: black; }

定时器后，将其更改为透明/白色

setTimeout(function () {document.body.style.background = "transparent";}, 2300);

（您也可以使用CSS而不是js来完成此操作）。

检查

最初，我将body background设置为黑色

body { background: black; }

定时器后，将其更改为透明/白色

setTimeout(function () {document.body.style.background = "transparent";}, 2300);

---

（您也可以使用CSS而不是js来实现这一点）。

这里是另一个更一般的答案

如果要在动画结束前隐藏多个元素，然后显示它们，可以执行以下操作：

• 给这些元素中的每一个赋予一个特殊的类，比如说

  稍后出现

• 定义类

  。稍后出现{opacity:0；}

• 使用jQuery，在计时器过期后，从拥有该类的元素中删除该类

setTimeout（函数（）{
$（'.beep-later'）.removeClass（'beep-later'）；
}, 2000);

此外，最好将javascript代码放在html标记之后

我使用了

color:red

而不是

opacity:0

，以便更清晰可见

---

另外，在Codepen中，您可以通过进入Settings-Javascript-quickadd来加载jQuery，这里是另一个更一般的答案

如果要在动画结束前隐藏多个元素，然后显示它们，可以执行以下操作：

• 给这些元素中的每一个赋予一个特殊的类，比如说

  稍后出现

• 定义类

  。稍后出现{opacity:0；}

• 使用jQuery，在计时器过期后，从拥有该类的元素中删除该类

setTimeout（函数（）{
$（'.beep-later'）.removeClass（'beep-later'）；
}, 2000);

此外，最好将javascript代码放在html标记之后

我使用了

color:red

而不是

opacity:0

，以便更清晰可见

---

另外，在Codepen中，您可以通过进入Settings-Javascript-Quick add

加载jQuery以获得更好的答案，正确缩进代码并尝试提供JSFIDLE。为了获得更好的答案，正确缩进代码并尝试提供JSFIDLE。嘿，这太棒了！谢谢@mikele。有一件事，你知道我是如何设置背景色，使其具有更高的z指数吗？如果我有任何字体，或者，嗯，任何颜色，除了黑色，它在动画结束之前仍然出现，这是一个问题。你不能这样做。请向我展示JSFIDLE或我的代码笔，以便我可以尝试从那里修复它。一种解决方案是为那些非黑色元素提供一个类，

.black{color:black！important；}

，然后在上面的

setTimeout（）

中添加代码以从所有这些元素中删除该类。对于jQuery，它看起来是这样的：

setTimeout（函数（）{document.body.style.background=“transparent”；$（'.black'）.removeClass（'black'）；}，2300）感谢您的回复。这是一支密码笔。基本上，我正试图使它使我的背景始终是黑色的，动画背景也是黑色的。理想情况下，在加载动画之前，根本看不到任何文本或任何内容。我注意到的另一件事，远没有那么重要，动画似乎在加载时改变了我的内容。但一次只能做一件事。再次感谢米克尔！很抱歉在html中包含javascript，当我尝试分离它时，它不断破坏我的网站！您的javascript是第一个javascript条目，但是我添加了另一个答案。检查一下。祝你好运。嘿，太棒了！谢谢@mikele。有一件事，你知道我是如何设置背景色，使其具有更高的z指数吗？如果我有任何字体，或者，嗯，任何颜色，除了黑色，它在动画结束之前仍然出现，这是一个问题。你不能这样做。请向我展示JSFIDLE或我的代码笔，以便我可以尝试从那里修复它。一种解决方案是为那些非黑色元素提供一个类，
.black{color:black！important；}
，然后在上面的
setTimeout（）
中添加代码以从所有这些元素中删除该类。对于jQuery，它看起来是这样的：
setTimeout（函数（）{document.body.style.background=“transparent”；$（'.black'）.removeClass（'black'）；}，2300）感谢您的回复。这是一支密码笔。基本上，我正试图使它使我的背景始终是黑色的，动画背景也是黑色的。理想情况下，在加载动画之前，根本看不到任何文本或任何内容。我注意到的另一件事，远没有那么重要，动画似乎在加载时改变了我的内容。但一次只能做一件事。再次感谢米克尔！很抱歉在html中包含javascript，当我尝试分离它时，它不断破坏我的网站！您的javascript是第一个javascript条目，但是我添加了另一个答案。检查一下。祝你好运。嘿，这是一个非常有创意的解决方案！干得好！非常感谢您的帮助，先生。嘿，这是一个非常有创意的解决方案！干得好！非常感谢你的帮助，先生。