css打字动画

最新推荐文章于 2024-05-13 11:05:12 发布

Spider--Man

最新推荐文章于 2024-05-13 11:05:12 发布

阅读量348

点赞数

分类专栏： css 文章标签： css 动画

本文链接：https://blog.csdn.net/wojiong132/article/details/66480729

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

思路：

每秒输出一个字，通过改变容器的宽度
光标，无限闪烁，通过设置border-right定时透明

<html>

<head>
    <meta charset="utf-8">
    <style>
        @keyframes typing {
            from {
                width: 0
            }
        }
        /*光标*/

        @keyframes caret {
            50% {
                border-color: transparent;
            }
        }

        h1 {
            /*ch：等宽字体;一个中文为2ch，1个英文为1ch*/
            width: 8ch;
            /*steps关键帧之间跳跃，四个字，需要四帧*/
            /*光标，每秒闪烁一次，无限次*/
            animation: typing 4s steps(4), caret 1s steps(1) infinite;
            overflow: hidden;
            /*阻止文本换行*/
            white-space: nowrap;
            border-right: 0.2rem solid;
        }
    </style>
</head>

<body>
    <h1>打字动画</h1>
</body>

</html>

Spider--Man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css打字动画

思路：每秒输出一个字，通过改变容器的宽度光标，无限闪烁，通过设置border-right定时透明<html><head> <meta charset="utf-8"> <style> @keyframes typing { from { width: 0 } }
复制链接

扫一扫