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

效果图如下:
CSS实现中英文混合打字效果实现_第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>

你可能感兴趣的:(css,css)