CSS打字效果

最新推荐文章于 2023-12-30 23:50:27 发布

码上暴富

最新推荐文章于 2023-12-30 23:50:27 发布

阅读量110

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_53483257/article/details/120057130

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

结果

运行中	运行结果

码上暴富

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
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">
复制链接

扫一扫