hi,欢迎访问本站!
当前位置: 首页Web前端正文

用纯CSS实现文本打字机效果

墨初 Web前端 682阅读

CSS样式代码可以在html页面上作出很多炫酷的效果,下面就是是用CSS样式代码实现的一个打字机打出文字的效果,大家可以参考一下。

纯CSS实现文字的打印机效果,要用到 animation 动画元素,根据文字的字数来算一下动画的步数,并设置每步动画的时间,可参考一下下面的示例代码。

CSS实现文字打印机效果的方法

1、先上效果图

Nov-08-2022 12-21-00.gif

2、示例代码

<style>
    .main {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .content {
        width: 130px;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        font-family: monospace;
        font-size: 2em;
        animation: go 4s steps(8), off .5s step-end infinite alternate;
    }
    @keyframes go {
        from {
            width: 0;
        }
    }
    @keyframes off {
        50% {
            border-color: transparent;
        }
    }
</style>
<div class="main">
    <div class="content">73so.com</div>
</div>
标签:
声明:无特别说明,转载请标明本文来源!
相关推荐