多行文本CSS的打字效果 |
您所在的位置：网站首页 › css多行打字机 › 多行文本CSS的打字效果 |
|
我正在尝试使用CSS获得打字动画效果。 (参考：https://css-tricks.com/snippets/css/typewriter-effect/) 我正在尝试计算多行文本的效果，想知道如何在键入第二行之前将光标从第一行移走？ 代码如下所示。 *{ margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } .container { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } #hero { background-image: url(bg.png); background-size: cover; background-position: top center; position: relative; z-index: 1; } .typewriter h1 { color: #fff; font-family: monospace; overflow: hidden; font-size: 80px; border-right: .15em solid orange; white-space: nowrap; margin: 0 auto; /* Gives that scrolling effect as the typing happens */ /* keeps content in one line */ letter-spacing: .15em; animation: typing 2.5s steps(22, end), blink-caret .75s step-end; } .typewriter h2 { color: #fff; font-family: monospace; font-size: 40px; white-space: nowrap; overflow: hidden; border-right: .15em solid orange; margin: 0 auto; /* Gives that scrolling effect as the typing happens */ -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end; -webkit-animation-delay: 3s; -webkit-animation-fill-mode: both; -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end; -moz-animation-delay: 3s; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } } Hello, This is XYZ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |