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

对于需要“填充”空格而不是生成新行的单词/句子，我建议FitText

如果您想自己实现它，请看以下内容：

// For dynamic character count, you could do something like this:

  $('.fittext-dynamic').each(function(){
    let t          = $(this),
        width      = t.data("width") * 2,
        characters = t.html().length,
        size       = width/characters;
    
    $(this).css('font-size', `${size}vw`);
  });

@import 'https://fonts.googleapis.com/css?family=Baloo+Paaji';

.fittext {
  // to use, divide 100vw by letter count, including spaces
  font-size:8.8vw;
  line-height: 1;
  
  text-align:center;
}
.fittext2 {
  font-size: 5vw;
  margin-top: 0;
}
body {
  background-color:#c44032;
  color:#f4f1de;
  font-family: 'Baloo Paaji', 'Impact';
}
h1 {
   margin-bottom:0;
    text-align:center;
  text-shadow: #863027 .01em .01em 0,
			#863027 .02em .02em 0,
			#863027 .03em .03em 0,
			#863027 .04em .04em 0,
			#863027 .05em .05em 0,
			#863027 .06em .06em 0,
			#863027 .07em .07em 0,			
			#863027 .08em .08em 0,
			#863027 .09em .09em 0,
			#863027 .1em .1em 0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="fittext">Fit me to browser width</h1>
<h1 class="fittext2">and me to half of it</h1>

<!-- The only thing that requires js -->
<h1 class="fittext-dynamic" data-width="100">and I'm dyamic!</h1>

<!-- Only necessary on document load, not window resize -->

Answer 2

您可以使用单个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>

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

2 个答案: