javascript - 我在首页上的名字没有反应

我已经在网站首页上以我的名字编写了动画代码。我为单个字母使用了不同的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>

最佳答案

您可以使用单个h1作为名称，最后使用vw设置字体大小：

清理html的示例，还有一点CSS

.MainText {
  font-size: calc(5vw);
  left: 18%;
  top: 25%;
  font-family: "Arial Black";
  position: fixed;
}

.hoverr {
  display:inline-block;
  transition: transform ease 1s;
}
.hoverr:hover {
  transform: scale(1.15) translatey(-3vw);
  text-shadow: rgb(121, 121, 121);
}

<div class="MainText">
  <h1>
  <!--first name-->
    <span class="hoverr ">A</span>
    <span class="hoverr">B</span>
    <span class="hoverr">H</span>
    <span class="hoverr">I</span>
    <span class="hoverr">N</span>
    <span class="hoverr">N</span>
    <!--blank space for seprating first name and last name-->
    <br>
    <!--last name-->
    <span class="hoverr">K</span>
    <span class="hoverr">R</span>
    <span class="hoverr">I</span>
    <span class="hoverr">S</span>
    <span class="hoverr">H</span>
    <span class="hoverr">N</span>
  </h1>
  </div>

如果该页面上没有其他内容，并且您希望在Midlle中使用自己的名字，那么flex可以轻松地为您提供帮助：

/* centers body in the window if smaller than window */

html {
  min-height: 100vh;
  display: flex;
}

body {
  margin: auto;
}

/* end page centering */


.MainText {
  font-size: calc(5vw);
  font-family: "Arial Black";
}

.hoverr {
  display: inline-block;
  transition: transform ease 1s;
}

.hoverr:hover {
  transform: scale(1.15) translatey(-3vw);
  text-shadow: rgb(121, 121, 121);
}

<div class="MainText">
  <h1>
    <!--first name-->
    <span class="hoverr ">A</span>
    <span class="hoverr">B</span>
    <span class="hoverr">H</span>
    <span class="hoverr">I</span>
    <span class="hoverr">N</span>
    <span class="hoverr">N</span>
    <!--blank space for seprating first name and last name-->
    <br>
    <!--last name-->
    <span class="hoverr">K</span>
    <span class="hoverr">R</span>
    <span class="hoverr">I</span>
    <span class="hoverr">S</span>
    <span class="hoverr">H</span>
    <span class="hoverr">N</span>
  </h1>
</div>

关于javascript - 我在首页上的名字没有反应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57361173/