CSS打字效果

偏执的太偏执、 2023-10-06 21:55 62阅读 0赞

![在这里插入图片描述][cda02bac82584257b9e1fb84dbc62c10.gif_pic_center]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>wgchen</title>
        <link rel="shortcut icon" href="#" />
        <meta name="keywords" content="https://wgchen.blog.csdn.net">
        <meta name="keywords" content="技术文章">
        <meta name="keywords" content="博客">
        <meta name="keywords" content="willem">
        <meta name="keywords" content="ycc">
        <style>
            .wrapper {
          
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
    
            .typing-demo {
          
                width: 57ch;
                animation: typing 12s steps(57), blink .5s step-end infinite alternate;
                white-space: nowrap;
                overflow: hidden;
                border-right: 3px solid;
                font-family: monospace;
                font-size: 2em;
            }
    
            @keyframes typing {
          
                from {
          
                    width: 0
                }
            }
    
            @keyframes blink {
          
                50% {
          
                    border-color: transparent
                }
            }
        </style>
    </head>
    
    <body>
    
        <div class="wrapper">
            <div class="typing-demo">
                https://wgchen.blog.csdn.net专注于前端及PHP开发的技术博客
            </div>
        </div>
    
    </body>
    
    </html>

[cda02bac82584257b9e1fb84dbc62c10.gif_pic_center]: https://img-blog.csdnimg.cn/cda02bac82584257b9e1fb84dbc62c10.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 自动打字效果的实现

阅读目录最终效果 index.html index.js index.css 最终效果 ![在这里插入图片描述][

拼搏现实的明天。/ 2023年10月07日 20:16/ 0 赞/ 63 阅读

相关 CSS打字效果

![在这里插入图片描述][cda02bac82584257b9e1fb84dbc62c10.gif_pic_center] <!DOCTYPE html> <

偏执的太偏执、/ 2023年10月06日 21:55/ 0 赞/ 63 阅读

相关纯CSS简单实现的炫酷打字效果

.asprint { width: 100%; white-space: nowrap; overflow: hidd

╰+攻爆jí腚メ/ 2023年01月18日 11:29/ 0 赞/ 254 阅读

相关 css 动画打字效果

本文借鉴 [https://blog.csdn.net/weixin\_39843414/article/details/119792197][https_blog.csdn

女爷i/ 2022年09月11日 11:15/ 0 赞/ 279 阅读

相关 jQuery爱心表白打字动画效果

[下载地址][Link 1]jQuery实现的温馨浪漫爱心表白动画特效，打字效果。 ![1631391547.png][] dd: [Link 1]: https://

今天药忘吃喽~/ 2022年09月11日 03:29/ 0 赞/ 217 阅读

相关基于jQuery标题有打字效果的焦点图

给大家分享一款基于jQuery标题有打字效果的焦点图。之前为大家分享了好多jquery的焦点图。这款焦点图适用浏览器：IE8、360、FireFox、Chrome、Safari

绝地灬酷狼/ 2022年08月06日 11:24/ 0 赞/ 199 阅读

相关 cocos2dx3.6实现打字效果

Label laber = Label::create("", "Terminal", 20); this->addChild(laber); la

不念不忘少年蓝@/ 2022年08月03日 13:45/ 0 赞/ 222 阅读

相关 Idea使用插件实现ATOM的打字效果

看到atom打字的效果，发现很霸气，然后就查了下idea有没有类似的，后面居然发现有，果断就试下。还行，就是有时候会卡死。后来用用回原来的了。说下过程：下载acti

蔚落/ 2022年06月18日 05:48/ 0 赞/ 360 阅读

相关 js模仿打字效果的方法

模仿打字效果： function typing()\{ var divTyping = $('.txt2'); if (i <= mobile.len

蔚落/ 2022年05月29日 01:36/ 0 赞/ 212 阅读

相关模仿终端打字效果

模仿终端打字效果 … <script type="text/javascript"> var charIndex = -1; va

青旅半醒/ 2022年05月04日 06:00/ 0 赞/ 233 阅读