文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

text-typing

发布于 2023-08-19 19:14:40 字数 1307 浏览 0 评论 0 收藏 0

text-typing

<style>
    body {
        font-family: monospace, sans-serif;
    }

    @keyframes typing {
        from {
            width: 0
        }
    }

    @keyframes caret {
        50% {
            border-color: currentColor; /*avoid can't blink in old browser*/
        }
    }

    h1 {
        width: 15ch; /* text-width, ch for monospace */
        overflow: hidden;
        white-space: nowrap;
        border-right: .05em solid;
        border-right: .05em solid transparent; /* rollback style*/
        animation: typing 6s steps(15),
        caret 1s steps(1) infinite;
    }
</style>
<body>
<h1>CSS is awesome!</h1>
<script>
    function $$(selector, context) {
        context = context || document;
        var elements = context.querySelectorAll(selector);
        return Array.prototype.slice.call(elements);
    }

    $$('h1').forEach(function (h1) {
        var len = h1.textContent.length,
                s = h1.style;
        s.width = len + 'ch';
        s.animationTimingFunction = "steps(" + len + "),steps(1)";
    });
</script>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

text-typing

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。