css动画自动打字，让你的文字飞舞起来

最新推荐文章于 2022-08-01 08:42:14 发布

weixin_30767835

最新推荐文章于 2022-08-01 08:42:14 发布

阅读量481

点赞数

原文链接：http://www.cnblogs.com/xiaobaiv/p/9108872.html

版权

自动打字的效果非一般的炫酷

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    @keyframes typing { 
        from { width: 0; } 
    } 
    @keyframes caret { 
        50% { border-color: transparent; } 
    } 
    p { 
        width: 16em; 
        overflow: hidden; 
        white-space: nowrap; 
        border-right: 0.1em solid; 
        animation: typing 13s steps(16), caret 0.5s steps(1) infinite;
    }
    </style>
    </head>
    <body>
    <p>心没有栖息的地方，到哪都是流浪。</p>
    </body>
    </html>