CSS如何实现打字机效果的方法

放眼望去,水田已被一莲花覆盖,鲜艳的红色水滴随雨水流下,半溶解的花海在彩霞中无边无际地延伸,抬头仰望,之间峥嵘的山峰在山腹间吐出薄薄的春云。

发现一个有趣的东西,就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符,并且字符串中的每个一个字符一个接着一个的出现。

纯CSS实现文字的打印机效果,要用到 animation 动画元素,下面先上示例代码。

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

1、先上效果图

CSS实现打子机效果的方法

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>

到此这篇关于CSS如何实现打字机效果的方法就介绍到这了。健康没有捷径,来自点滴习惯的养成;养生只能自学,随时保持学习的状态。更多相关CSS如何实现打字机效果的方法内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
收集了几个CSS的初始化代码

使整个网站页面变灰的方法

CSS画太极图的方法

如何解决移动端滑动验证时页面跟随移动的问题

javascript隐藏鼠标的方法