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

发布时间：2023-01-01 06:26:34 来源：互联网

.

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

发现一个有趣的东西，就是使用纯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如何实现打字机效果的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章: