所以我为 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;
}
}
你能帮帮我吗?我究竟做错了什么?
最佳答案
这是可以做到的。 如果您想在悬停后保持文本显示,您可能需要在悬停后向其添加添加类。
.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>
关于html - CSS 打字效果不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50770355/