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

Question

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

我试过将字母放在同一个 div block 中，但情况是一样的。我希望在小屏幕上字母不应该一个接一个地向下显示，而是完整的姓氏一次显示。

.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 {
  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>

---

如果该页面上没有其他内容，并且您希望在中间显示您的名字，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>