越早知道越好(html打字机效果)css打字机效果逐行打印,CSS实现打字机效果的方法,CSS实现打字机效果的方法,
发现一个有趣的东西,就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符,并且字符串中的每个一个字符一个接着一个的出现。
纯CSS实现文字的打印机效果,要用到 animation 动画元素,下面先上示例代码。
CSS实现文字打印机效果的方法
1、先上效果图
2、示例代码
<style>
.main {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 450px;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
animation: go 4s steps(22), off .5s step-end infinite alternate;
}
@keyframes go {
from {
width: 0;
}
}
@keyframes off {
50% {
border-color: transparent;
}
}
</style>
<div class="main">
<div class="content">飞鸟慕鱼博客 http://feiniaomy.com
</div>
</div>复制
本文链接:http://blog.sauo.top/?id=303 感谢分享!