Css打字機效果

github地址，喜歡的可以star下哦

插件預覽圖

使用教程

代碼展示

• vue頁面使用

<template>
    <view class="typewriter">
        <view class="text">The cat and the hat.</view>
    </view>
</template>

• Style

<style>
    .typewriter {
        width: 390upx;
        margin: auto;
    }
    
    .typewriter .text {
        font-size: 40upx;
        overflow: hidden;
        border-right: 2upx solid orange;
        white-space: nowrap;
        margin: 0 auto;
        letter-spacing: 2;
        animation:typing 3.5s steps(40, end),blink-caret .75s step-end infinite;
    }
    
    @keyframes typing {
        from {
            width: 0
        }
    
        to {
            width: 100%
        }
    }
    
    @keyframes blink-caret {
    
        from,
        to {
            border-color: transparent
        }
    
        50% {
            border-color: orange;
        }
    }
</style>

兼容性

全平臺兼容