我在首页上的名字没有响应

Question

我已经在我的网站的第一页上以我的名字为动画编写了代码。我对单个字母使用了不同的 h1 块，全名位于 div 块中。我希望将鼠标悬停在名字的字母上时，它们会稍微升高一点并稍微向上移动，但是我遇到了一个问题，即在小屏幕上而不是整个姓氏上，如果我们使用更小的屏幕，单个字母会下降一封又一封的信，我希望整个姓氏立即永远消失。

我试过把这封信放在同一个 div 块中，但情况是一样的。我希望在小屏幕上，字母不应该一个一个地出现，而是一个完整的姓氏一次出现。

.MainText {

  font-size: 50px;

  left: 18%;

  top: 25%;

  font-family: "Arial Black";

  position: fixed;

}

.hoverr {

  position: relative;

  top: 0;

  transition: top ease 1s;

  float: left;

  clear: none;

}

.hoverr:hover {

  top: -30px;

  transform: scale(1.15);

  text-shadow: rgb(121, 121, 121);

}

<div class="MainText">

  <!--first name-->

  <div>

    <h1 class="hoverr ">A</h1>

    <h1 class="hoverr">B</h1>

    <h1 class="hoverr">H</h1>

    <h1 class="hoverr">I</h1>

    <h1 class="hoverr">N</h1>

    <h1 class="hoverr">N</h1>

  </div>

  <!--blank space for seprating first name and last name-->

  <h1 class="hoverr">&nbsp; </h1>

  <!--last name-->

  <div>

    <h1 class="hoverr">K</h1>

    <h1 class="hoverr">R</h1>

    <h1 class="hoverr">I</h1>

    <h1 class="hoverr">S</h1>

    <h1 class="hoverr">H</h1>

    <h1 class="hoverr">N</h1>

  </div>

</div>

Answer 1

您可以使用单个 h1 作为您的名字，并最终使用 vw 来设置您的字体大小：示例清理 html 和一点你的 css.MainText {&nbsp; font-size: calc(5vw);&nbsp; left: 18%;&nbsp; top: 25%;&nbsp; font-family: "Arial Black";&nbsp; position: fixed;}.hoverr {&nbsp; display:inline-block;&nbsp; transition: transform ease 1s;}.hoverr:hover {&nbsp; transform: scale(1.15) translatey(-3vw);&nbsp; text-shadow: rgb(121, 121, 121);}<div class="MainText">&nbsp; <h1>&nbsp; <!--first name-->&nbsp; &nbsp; <span class="hoverr ">A</span>&nbsp; &nbsp; <span class="hoverr">B</span>&nbsp; &nbsp; <span class="hoverr">H</span>&nbsp; &nbsp; <span class="hoverr">I</span>&nbsp; &nbsp; <span class="hoverr">N</span>&nbsp; &nbsp; <span class="hoverr">N</span>&nbsp; &nbsp; <!--blank space for seprating first name and last name-->&nbsp; &nbsp; <br>&nbsp; &nbsp; <!--last name-->&nbsp; &nbsp; <span class="hoverr">K</span>&nbsp; &nbsp; <span class="hoverr">R</span>&nbsp; &nbsp; <span class="hoverr">I</span>&nbsp; &nbsp; <span class="hoverr">S</span>&nbsp; &nbsp; <span class="hoverr">H</span>&nbsp; &nbsp; <span class="hoverr">N</span>&nbsp; </h1>&nbsp; </div>如果该页面上没有其他内容，并且您希望将您的名字放在中间，那么 flex 可以轻松帮助您：/* centers body in the window if smaller than window */html {&nbsp; min-height: 100vh;&nbsp; display: flex;}body {&nbsp; margin: auto;}/* end page centering */.MainText {&nbsp; font-size: calc(5vw);&nbsp; font-family: "Arial Black";}.hoverr {&nbsp; display: inline-block;&nbsp; transition: transform ease 1s;}.hoverr:hover {&nbsp; transform: scale(1.15) translatey(-3vw);&nbsp; text-shadow: rgb(121, 121, 121);}<div class="MainText">&nbsp; <h1>&nbsp; &nbsp; <!--first name-->&nbsp; &nbsp; <span class="hoverr ">A</span>&nbsp; &nbsp; <span class="hoverr">B</span>&nbsp; &nbsp; <span class="hoverr">H</span>&nbsp; &nbsp; <span class="hoverr">I</span>&nbsp; &nbsp; <span class="hoverr">N</span>&nbsp; &nbsp; <span class="hoverr">N</span>&nbsp; &nbsp; <!--blank space for seprating first name and last name-->&nbsp; &nbsp; <br>&nbsp; &nbsp; <!--last name-->&nbsp; &nbsp; <span class="hoverr">K</span>&nbsp; &nbsp; <span class="hoverr">R</span>&nbsp; &nbsp; <span class="hoverr">I</span>&nbsp; &nbsp; <span class="hoverr">S</span>&nbsp; &nbsp; <span class="hoverr">H</span>&nbsp; &nbsp; <span class="hoverr">N</span>&nbsp; </h1></div>