我已經在我的網站的第一頁上以我的名字為動畫編寫了代碼。我對單個字母使用了不同的 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>