我想在我的一个段落中添加打字机效果,当我添加它时,光标会输入所有内容,然后继续向左移动,然后自行修复。如何使其在文本处结束。
#p12 {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
animation: typing 1.3s steps(10, end), blink-caret .75s steps(50, end) infinite;
}
#p12 {
display: inline-flex;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
<center>
<p id="p12" style="color:red;font-size:20px">
<b> Welcome to my website! </b> </p> </center>
最佳答案
您可以在容器元素上使用 display:flex 来防止动画元素扩展到全屏宽度。 (我还用 <center>
等效项替换了您对过时 margin:auto
标签的使用:)
#container {
display: flex;
}
#center {
margin: auto;
}
/* Remaining CSS is identical to original */
#p12 {
display: flex;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
animation: typing 1.3s steps(10, end), blink-caret .75s steps(50, end) infinite;
}
#p12 {
display: inline-flex;
}
/* The typing effect */
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}
<div id="container">
<div id="center">
<p id="p12" style="color:red;font-size:20px">
<b>Welcome to my website!</b>
</p>
</div>
</div>
关于html - 打字机效果,光标移至屏幕末尾然后自行修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51430373/