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

这可以做什么。如果您希望在悬停时显示文字，则可能需要在悬停时向其添加添加类。

＆＃13;

.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
  }
}

＆＃13;

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

＆＃13;

CSS输入效果不起作用

1 个答案: