如何在Hover上添加带有动画的字母(CSS/HTML/Javascript)

Question

我想在hover (一个网站的一种风格选择)上将各种缩略词扩展成完整的单词--想想"p| prkr“，在hover上它会变成"p| parker”。一旦你搬走，它就会恢复原状。Example (左上角)。

我无论如何也想不出该怎么做！

尝试使用display:none和on:hover show，但我认为我需要某种类型的javascript来使动画“漂亮”？或者隐藏延迟？我发现了很多“打字”动画，但没有这样的动画，但我觉得应该有一种方法来做到这一点。另外，我如何嵌套它，使单词成为一个链接？我得把元音藏起来。

 <nav>
    <div class="container">
       <h1><a href="index.html">
        <span class="let-1">p|</span>
        <span class="let-2">p</span>
        <span class="let-4">a</span>
        <span class="let-5">r</span>
        <span class="let-6">k</span>
        <span class="let-7">e</span>
        <span class="let-8">r</span>
      </a></h1>
    </div>
</nav>


nav.addEventListener('hover', function () {
this.classList.toggle('is-active');

我就是想不通，非常感谢你的帮助！这是个新手，我已经精疲力尽了。

Answer 1

下面的代码片段应该会给你一个想法，让你知道如何完成一些类似于你发送的引用的事情。

​

body {
  background: #1d1e21;
  font-family: "Poppins", sans-serif;
}
a{
  text-decoration: none;
}
.logo{
  display: inline-flex;
}
.animated-logo{
  display: flex;
  color: #fff; 
  transition-property: transform;
  transition-duration: .15s;
  font-size: 2rem;
  font-weight: 600;
}
.letter{
  display: inline;
}
.letter.first{
  margin-right: 10px;
}
.letter.first:after{
  content: '|';
  font-weight: 200;
  font-size: 20px;
  margin-left: 10px;
}
.letter-hide {
  transform: scaleX(0);
  opacity: 0;
  transform-origin: 0 50%;
  transition: all .4s ease;
  width: 0;
}
.letter-hide:nth-of-type(3) {
  transition-delay: 50ms;
}
.letter-hide:nth-of-type(6) {
  transition-delay: 75ms;
}
.animated-logo:hover .letter-hide {
  width: 100%;
  opacity: 1;
  transform: scaleX(1);
}

  <a href="#" class="logo">
    <h3 class="animated-logo">
      <span class="letter first">p</span>
      <span class="letter">p</span>
      <span class="letter-hide">a</span>
      <span class="letter">r</span>
      <span class="letter">k</span>
      <span class="letter-hide">e</span>
      <span class="letter">r</span>
    </h3>
  </a>

​

Answer 2

一种相当简单的方法是隐藏全文，直到悬停，首先只显示一个之前的伪元素，其内容是保存在data- attribute中的缩短版本。在悬停时，通过在伪元素后面拉回一个不透明的元素来显示完整版本。

这样一来，就可以通过CSS完成，HTML也不会那么凌乱。

​

[data-full] {
  position: relative;
  display: inline-block;
  color: transparent;
}

[data-full]:hover {
  color: black;
}

[data-full]::before {
  content: attr(data-full);
  color: black;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

[data-full]:hover::before {
  color: transparent;
}

[data-full]::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  transition: width 2s linear;
  z-index: -1;
  display: inline-block;
}

[data-full]:hover::after {
  content: '';
  width: 0;
  z-index: 1;
}

<div class="start">p| <span data-full="prkr">parker</span></div>

​

当然，使用一点Javascript，即使对于任意长度的单词，您也可以获得更多的计时。另外，如果知道单词的初始字符总是竖线前面的字符，则可以由JS提取并显示，而不需要将其放在初始HTML中的单独元素中。同样，JS可以用来去除元音，在运行时创建数据属性，使HTML更加简单。