scc 打字机动画实现

作者: 键盘已附魔 | 来源:发表于2021-09-12 13:41 被阅读0次

打字机动画实现

打字机.gif

<style>
        /* 定义动画 */
        @keyframes move {
            0% {
                width: 0;
            }
            100% {
                width: 260px;
            }
        }
        
        div {
            /* 字体大小 */
            font-size: 20px;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 强制一行显示 */
            white-space: nowrap;
            /* 宽度为零 */
            width: 0;
            /* 高度30 */
            height: 30px;
            /* 背景颜色 */
            /* background-color: #0f0; */
            /* 调用动画，动画名称，动画时长，运动曲线走13步，结束时停在最后 */
            animation: move 6s steps(13) forwards;
        }
    </style>
</head>

<body>
    <div>今天天气很好，我要出去散步</div>
</body>

文字不同是因为谷歌浏览器的英文网页翻译。影响不大。