Question

我目前正在尝试制作带有欢迎消息的动画。我希望将其放置在div的垂直中间。我将其从大字体转换为小字体，似乎大字体的高度仍在影响位置，还是我错了？

#barbar{
height:10%;
width: 100%;
background-color:rgba(79, 79, 90, 0.92);
bottom: 0;
position: fixed;
z-index: 3;
}

.hello{
    color: black;
    font-family: "Times New Roman";
    text-align: center;
    animation: ease;
    animation-name: gas;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration:2s;
    position: fixed;
    font-size: 100px;
    bottom: 700px;
    margin-left: -20%;
    white-space: nowrap;
}
@keyframes gas{
    from { font-size: 500px; bottom: 700px; margin-left: -20%;}
    to  { font-size: 12px; bottom: 0; margin-left: 15%;}
}

<div id = "barbar">
  <h3 class ='hello'> Welocme User </h3>
</div>

如您所见，我的h3位于div内，但仍无法以某种方式结束我要放置的位置。 to bottom:-x%不是我要寻找的解决方案。

Answer 1

添加“ margin-bottom：0;”到您的h3标签。

默认情况下，浏览器向h3元素添加1em的边距。由于“ em”单位与字体大小有关，因此，当您向元素添加“ font-size：100px”时，您也会获得100px的页边空白。

我建议使用CSS重置。它将清除所有浏览器的默认设置，防止它在您的页面上添加不需要的样式。它还可以确保您的页面在所有浏览器中看起来都完全一样，因为不同的浏览器使用不同的默认值。建议您在所有页面上使用meyerweb reset。

从大字体到小字体的动画使定位混乱

1 个答案: