Question

我正在使用particles.js设置全屏粒子效果，我指定我希望通过使用height: 100vh;来使动画全屏显示，这种效果非常好，并且可以实现我想要实现的效果。然后，我尝试在粒子动画的顶部添加文本，然后使用line-height: 100vh;将其垂直居中。虽然这样做时我的动画会停止并变成纯灰色背景，并且文本居中？我希望动画继续在其顶部（居中）显示文本，但不确定如何阻止文本使动画混乱。我在下面收录了一段正在发生的事情的视频。

Video (Streamable)

HTML

<div id="particles-js">
  <div id="main-text">Center Me</div>
</div>

<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.js"></script>
<script>
particlesJS.load('particles-js' , 'particles.json', function(){console.log('particles.json loaded...')})
</script>
<!--End Of Scripts-->

CSS

*{
  padding: 0;
  margin: 0;
}

body{
  font-family: sans-serif;
  overflow: hidden;
}

#particles-js{
  background:#4a4a4a; 
  height: 100vh;
}

#main-text{
    text-align: center;
    /* line-height: 100vh; */
}

Answer 1

请尝试更改将文本居中于此的方式：

#main-text{
    /*text-align: center;*/
    /* line-height: 100vh; */
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

我相信这是因为即使字体仍然很小，行高也会覆盖整个视口（我不能肯定地说是这样，这只是一个假设）

尝试使文本居中时动画消失

1 个答案: