CSS实现中英文混合打字效果实现

吃葡萄不吐葡萄皮嘻嘻

已于 2022-01-19 09:37:32 修改

阅读量669

点赞数 1

分类专栏： css 文章标签： css

于 2021-12-02 10:31:12 首次发布

本文链接：https://blog.csdn.net/qq_45695853/article/details/121671639

版权

css 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

效果图如下：
在这里插入图片描述

	<style>
        .typing {
            color: plum;
            font-size: 24px;
            width: 18.5em;
            height: 1.25em;
            border-right: 1px solid transparent;
            animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite;
            font-family: Consolas, Monaco;
            word-break: break-all;
            overflow: hidden;
            margin: 200px;
        }

        /* 打印效果 */
        @keyframes typing {
            from {
                width: 0;
            }

            to {
                width: 18.5em;
            }
        }

        /* 光标闪啊闪 */
        @keyframes blink-caret {

            from,
            to {
                border-color: transparent;
            }

            50% {
                border-color: currentColor;
            }
        }
    </style>
    <p class="typing">中英文mixed打字effect，作者:小小白</p>