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

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 {

  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>