css3动画，动态打字效果

最新推荐文章于 2024-07-25 20:13:02 发布

酷jjs

最新推荐文章于 2024-07-25 20:13:02 发布

阅读量543

点赞数

分类专栏： css css3 前端笔记

本文链接：https://blog.csdn.net/qq_32584661/article/details/102723742

版权

前端笔记同时被 3 个专栏收录

165 篇文章 2 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏


    <!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>css3动画，动态打字效果</p>
    </body>
    </html>

效果：

css3动画，动态|