html - CSS 打字效果不起作用

Question

所以我为 div 中的段落编写了这段小代码，用于模拟悬停在 div 上时的打字效果:

.about-panel:hover p {
    color: white;
    font-size: 1em;

    white-space: wrap;
    overflow: hidden;


    -webkit-animation: typing 4s steps(1000, end),
    blink-caret .5s step-end infinite alternate;
}

但是好像不行？文字在4s结束时一次性出现

动画代码如下:

@-webkit-keyframes typing {
    from {
        width: 0;
    }
}

@-webkit-keyframes blink-caret {
    50% {
        border-color: transparent;
    }
}

你能帮帮我吗？我究竟做错了什么？

Answer 1

这是可以做到的。如果您想在悬停后保持文本显示，您可能需要在悬停后向其添加添加类。

.about-panel {
  float: left;
}

.about-panel p {
  border-right: .15em solid transparent;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
}

.about-panel:hover p {
  width: 100%;
  transition: width 0.3s;
  animation: blink-caret .5s step-end infinite;
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange
  }
}

<div class="wrapper">
  <div class="about-panel">
  Hover here
    <p>Hello Worls !!!</p>
  </div>
</div>