使用CSS实现打字机效果
实现效果
实现
HTML 元素：
|
1
2
3
|
<divclass="typewriter">
<h1class="typing">The cat and the hat.</h1>
</div>
|
实现打字机效果的关键是两个动画效果，文字出现的动画，和光标闪烁出现的动画。
这两个动画的实现方式也很简单，文字出现的打字机动画只通过控制元素长度即可。光标闪烁出现可以通过添加右边框，并且给边框添加颜色动画实现。
|
1
2
3
4
5
|
/* 打字机动画 */
@keyframes typing {
from {width:0}
to {width:100%}
}
|
|
1
2
3
4
5
|
/* 光标动画 */
@keyframes blink-caret {
from, to {border-color:transparent}
50%{border-color: orange }
}
|
然后将动画效果添加到指定的元素上即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.typewriter .typing {
color:#fff;
font-family:monospace;
overflow:hidden;/* 保证文字在动画之前隐藏 */
border-right: .15emsolidorange;/* 使用边框实现光标 */
white-space:nowrap;
margin:0auto;
letter-spacing: .15em;
animation: /** 动画效果 */
typing3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
|
结合 Javascript 来控制样式类显示隐藏时机，可以轻松为不同文本实现打字机效果。
到此这篇关于使用CSS实现打字机效果的文章就介绍到这了,更多相关CSS打字机效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
本站大部分文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了您的权益请来信告知我们删除。邮箱：1451803763@qq.com