CSS打字效果

Posted 2021-09-18 码上暴富

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS打字效果相关的知识，希望对你有一定的参考价值。

CSS打字效果

CSS打字效果

CSS打字效果

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3文字输入打字效果代码</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background: #1d1f20;
        }
        /* Basic styles */
        h1 {
            position: relative;
            float: left;
            color: #d7b94c;
            font-family: 'Inconsolata', Consolas, monospace;
            font-size: 4em;
            margin:100px;
        }
        h1 span{
            position: absolute;
            top: 0;
            right: 0;
            background: #1d1f20;
            width: 100%;
            border-left: .1em solid transparent;
            -webkit-animation: typing 3s steps(16) forwards, cursor 1s infinite;
            animation: typing 3s steps(16) forwards, cursor 1s infinite;
        }
        /* Animation */
        @-webkit-keyframes typing{
            from { width: 100%;}
            to { width: 0;}
        }
        @-webkit-keyframes cursor{
            50% { border-color: white;}
        }
        @keyframes typing{
            from{ width: 100%;}
            to{ width: 0;}
        }
        @keyframes cursor{
            50% { border-color: white;}
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h1>Hello 码上暴富！<span>&nbsp;</span></h1>
    </div>
</body>
</html>

结果

运行中	运行结果

以上是关于CSS打字效果的主要内容，如果未能解决你的问题，请参考以下文章

炫酷 CSS 背景效果的 10 个代码片段