Question

我正在自己的网站上工作，而且我使用了这个编码器

https://codepen.io/nikolamitic/pen/vpNoNq在我的名字上创建一个动画。它工作正常，直到我想减少我的元素的行高而不会相互隐藏（参见“j”和“p”字符）。你可以看看这里：

h1{
    display:inline-block;
    font-family: sans-serif;
    font-size: 110px;
    letter-spacing: 3px;
    margin:0;
    line-height: 90px;
}
h1 p{margin:0;}

/*************************************************/
/************* LETTER ANIMATION HOVER ************/
/* Thanks to https://codepen.io/nikolamitic/pen/vpNoNq */

.letter-anim{
    position: relative;
    color: #fff;
    background-color: #222;
    overflow: hidden;
    cursor: pointer;
}

.letter-anim .letter-anim-dynamic,
.letter-anim  .letter-anim-dynamic p {    
    display: flex;
    justify-content: left;
    align-items: center;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 2;
    transition: all ease 0.7s;
}
.letter-anim  .letter-anim-dynamic{
    background-color: #fff;
    color: #222;
    overflow: hidden;
}
.letter-anim.active .letter-anim-dynamic,
.letter-anim:hover .letter-anim-dynamic {
    transform: translateX(100%);
}
.letter-anim.active  .letter-anim-dynamic p,
.letter-anim:hover .letter-anim-dynamic p {
    transform: translateX(-100%);
}
.letter-anim-static{
    font-size: 76px;
}

<h1 class="letter-anim h1-firstname">
  <span class="letter-anim-static">
    レ・ジェーン<br/>
  </span>
  <span class="letter-anim-dynamic">
    <p>Lejeune</p>
  </span>
</h1>

<br/>

<h1 class="letter-anim h1-lastname">
  <span class="letter-anim-static">
    ジョゼーフ<br/>
  </span>
  <span class="letter-anim-dynamic">
    <p>Joseph</p>
  </span>
</h1>

谢谢你的帮助！

Answer 1

看起来h1的容器对于内部的字符来说太小了。尝试将简单padding:10px添加到h1，容器应该有更多空间。

带有动画的Pbm悬停在纯色背景上

2 个答案: