Css打字机效果

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>  

兼容性

全平台兼容