时间戳

首页 > 解决方案 > 尝试使文本居中时动画消失

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

问题描述

我正在使用particles.js来设置全屏粒子效果，我指定我希望这个动画全屏使用height: 100vh;它已经完美地工作并实现了我想要实现的目标。然后我尝试在我的粒子动画顶部添加文本，然后使用line-height: 100vh;. 虽然这样做时我的动画停止并变成纯灰色背景并且我的文本居中？我希望我的动画继续运行上面的文本（居中），我不确定如何阻止我的文本弄乱我的动画。我在下面包含了一个视频，讲述了正在发生的事情。

视频（可流式传输）

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; */
}

标签： javascripthtmlcss

解决方案

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

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

我相信这是因为 line-height 覆盖了整个视口，即使字体仍然很小（我不能肯定是这种情况，这只是一个假设）

推荐阅读