CSS小玩意儿：chatgpt打字机效果（带前后端代码）

已于 2024-08-25 18:45:53 修改
阅读量860 收藏 20
点赞数 16
分类专栏： CSS 文章标签： css 前端 express websocket
于 2024-08-25 18:44:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangfulin/article/details/141532270
版权

一，效果

在这里插入图片描述

二，代码

1，搭个框架

创建一个显示内容的框框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typewriter Effect with Blinking Cursor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .typewriter-container {
            width: 600px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .typewriter-text {
            font-size: 18px;
            line-height: 1.5;
            margin: 0;
            display: inline;
        }
    </style>
</head>
<body>
<div class="typewriter-container">
    <p id="typewriter-text" class="typewriter-text">11111111111111111</p>
    <span class="typewriter-cursor"></span>
</div>
</body>
</html>
  • 设置页面布局，使内容居中。
  • 为容器添加样式，使其看起来像一个卡片。
  • 设置文本的基本样式。

2，添加光标样式和动画

在文本的末尾添加一个少说的光标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typewriter Effect with Blinking Cursor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .typewriter-container {
            width: 600px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .typewriter-text {
            font-size: 18px;
            line-height: 1.5;
            margin: 0;
            display: inline;
        }

        .typewriter-cursor {
            display: inline-block;
            width: 10px;
            height: 5px;
            background-color: #333;
            margin-left: 2px;
            animation: blink 0.7s infinite;
            vertical-align: bottom;
        }

        @keyframes blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="typewriter-container">
    <p id="typewriter-text" class="typewriter-text">1111111111111</p>
    <span class="typewriter-cursor"></span>
</div>
</body>
</html>
  • 设置光标的样式，使其看起来像一个小矩形。
  • 添加 blink 动画，使光标闪烁。

效果：
在这里插入图片描述

3，实现打字效果

使用JavaScript将内容不断添加到已存在的内容的末尾。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typewriter Effect with Blinking Cursor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .typewriter-container {
            width: 600px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .typewriter-text {
            font-size: 18px;
            line-height: 1.5;
            margin: 0;
            display: inline;
        }

        .typewriter-cursor {
            display: inline-block;
            width: 10px;
            height: 5px;
            background-color: #333;
            margin-left: 2px;
            animation: blink 0.7s infinite;
            vertical-align: bottom;
        }

        @keyframes blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="typewriter-container">
    <p id="typewriter-text" class="typewriter-text"></p>
    <span class="typewriter-cursor"></span>
</div>

<script>
    const text = "欢迎使用逐字显示的打字机效果！这个效果类似于 ChatGPT 的回复方式，可以增加用户体验的生动性和互动感。现在，我们在末尾添加了一个持续闪烁的光标。";
    let charIndex = 0;

    function typeWriter() {
        if (charIndex < text.length) {
            document.getElementById("typewriter-text").innerHTML += text.charAt(charIndex);
            charIndex++;
            let typingSpeed = Math.floor(Math.random() * (300 - 50 + 1)) + 50; // 模拟人类打字速度
            setTimeout(typeWriter, typingSpeed);
        }
    }

    // 开始打字效果
    window.onload = typeWriter;
</script>
</body>
</html>
  • 定义要显示的文本。
  • 创建 typeWriter 函数，该函数:
    • 检查是否还有字符需要显示。
    • 如果有，将下一个字符添加到文本中。使用 innerHTML 追加文本，而不是每次都重新设置整个内容，这在处理长文本时更高效。
    • 增加字符索引。
    • 生成一个随机的打字速度，模拟人类打字。
    • 使用 setTimeout 安排下一个字符的显示。
  • 当页面加载完成时启动打字效果。

三，实现类chatgpt内容输出的前后端代码

使用 Express.js 和 WebSocket 来实现一个更动态的打字机效果，其中内容从服务器逐步推送到前端。这种方法可以用于实时聊天、动态内容展示等场景。

服务器端代码（使用 Express 和 ws 库）：

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const path = require('path');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({server});

// 提供静态文件
app.use(express.static(path.join(__dirname, 'public')));

// WebSocket连接处理
wss.on('connection', (ws) => {
    console.log('Client connected');

    // 要发送的文本
    const text = "这是一个使用WebSocket实现的打字机效果。服务器会逐字符地将内容推送到前端，然后在前端以打字机效果展示出来。这种方法可以用于实时聊天、动态内容展示等多种场景。";
    let index = 0;

    // 定义发送字符的函数，一次随机延迟 500~1000 毫秒，随机发送1~5个字符
    function sendNextChar() {
        setTimeout(() => {
            const count = Math.floor(Math.random() * 5) + 1;
            ws.send(text.slice(index, index + count));
            index += count;

            if (index < text.length) {
                sendNextChar();
            }
        }, Math.floor(Math.random() * 500) + 500);
    }

    // 开始发送
    sendNextChar();

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

const PORT = process.env.PORT || 3001;
server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

客户端代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket打字机效果</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .typewriter-container {
            width: 600px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .typewriter-text {
            font-size: 18px;
            line-height: 1.5;
            margin: 0;
            display: inline;
        }

        .typewriter-cursor {
            display: inline-block;
            width: 10px;
            height: 20px;
            background-color: #333;
            margin-left: 2px;
            animation: blink 0.7s infinite;
            vertical-align: middle;
        }

        @keyframes blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="typewriter-container">
    <p id="typewriter-text" class="typewriter-text"></p>
    <span class="typewriter-cursor"></span>
</div>

<script>
    const socket = new WebSocket('ws://localhost:3001');
    const textElement = document.getElementById('typewriter-text');

    socket.onmessage = (event) => {
        textElement.innerHTML += event.data;
    };

    socket.onclose = () => {
        console.log('WebSocket连接已关闭');
    };

    socket.onerror = (error) => {
        console.error('WebSocket错误:', error);
    };
</script>
</body>
</html>

效果：
在这里插入图片描述

dangfulin
关注
  • 16
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js打字机效果代码
10-30
### JavaScript 打字机效果代码解析 #### 一、引言 在网页设计与开发过程中，动态效果的应用能够显著提升用户体验。其中，“打字机”效果作为一种常见的动态文本展示方式，广泛应用于各种场景之中，例如博客、个人...
vue3 实现 chatgpt 的打字机效果.zip
05-29
可以添加一个按钮或触发器，让用户手动开始或停止打字效果。在 Vue3 中，可以使用 `@click` 事件监听器来响应用户的操作。 7. **优化与调整** 根据实际需求调整打字速度、删除概率等参数，以达到理想的效果。可以...
css3动态输入打字效果代码
07-24
这个“css3动态输入打字效果代码”是一个实现此类效果的实例，下面将详细解释其背后的原理和技术。 首先，我们来探讨CSS3的关键帧动画（@keyframes）。关键帧动画是CSS3中的一个强大特性，允许开发者定义动画的起始...
如何在 React 中构建 ChatGPT 打字动画
05-05
ChatGPT 使用模拟在老式计算机屏幕上打字外观的打字动画。 这个动画是通过两个重要的概念来实现的： 文本一次显示一个字符，从而产生打字的错觉。 闪烁的光标表示当前正在键入的字符的位置。
css 将背景图片居中显示，并且显示全，不拉伸的效果实现，图片设置宽度，高度自适应，并且显示全。
jwbabc的专栏
08-23 329
二个经常使用的css：图片背景自适应、缩放，图片的自适应、缩放。
CSS 的font-variant属性
读心悦
08-26 346
CSS 属性用于控制小型大写字母（small-caps）的渲染。它主要用于在需要强调文本或改变文本风格时，提供一种视觉上更加优雅的展示方式。然而，需要注意的是，并非所有字体都支持小型大写字母的渲染，这取决于字体的具体设计和支持情况。
CSS 的文字平滑属性font-smooth
读心悦
08-23 355
此外，还有一些其他的方法可以间接地改善文字的平滑度和可读性，比如选择合适的字体、调整字体大小、使用字体加载策略（如Font Loading API）来优化字体文件的加载和渲染等。这样的属性，但可以通过一些间接的方法和属性来控制文字的平滑度和可读性。在实际应用中，应该根据具体需求和目标受众来选择合适的方法，并考虑到跨浏览器兼容性和性能优化的问题。是一个非标准的属性，它的支持可能因浏览器而异，并且在未来的浏览器版本中可能会被弃用或更改。属性，这是一个非标准的CSS属性，用于控制字体渲染的平滑度。
深入解析css-学习小结
peter6768的博客
08-21 202
层叠指规则冲突时，如何选择规则。
vue 动态设置每个tab的颜色scss
qq_32555123的博客
08-20 326
vue设置动态tab样式和颜色
了解一下 CSS 的了解font-variant-alternates属性
最新发布
读心悦
08-26 528
是 CSS Fonts 模块中的一个属性，它允许你控制字体的变体（variants）和替代字形（alternate glyphs）的显示。这个属性提供了比更细粒度的控制，特别是当字体包含多种样式或变体时。然而，需要注意的是，属性的具体实现和可用值可能因浏览器和字体的不同而有所差异。它主要用于那些支持多种样式或变体的专业字体，如 OpenType 字体。
响应式Web设计:纯HTML和CSS的实现技巧
m0_66995023的博客
08-20 787
使用百分比单位 (%) 或者相对单位 (em, rem) 定义宽度和高度，使元素能够根据容器大小自动调整。使用相对单位 (em 或 rem) 来设置字体大小，以便它们可以根据父元素或根元素的字体大小自动缩放。通过调整字体大小、颜色和间距来创建清晰的视觉层次，帮助用户更容易地导航和理解页面内容。从最基本的功能开始构建网站，然后逐渐添加更复杂的功能，确保所有用户都能访问基本内容。（1）使用不同的设备和浏览器进行测试，确保网站在各种环境下都能良好工作。（2）利用浏览器的开发者工具来模拟不同的屏幕尺寸和设备。
CSS3 视差滚动相册
懒羊羊大王的博客
08-22 714
一个基于 CSS3 的视差滚动相册，采用网格布局（主要）与弹性布局。
原神4.8版本抽到角色和重点培养数据表
lulei5153的博客
08-20 694
【代码】原神4.8版本抽到角色和重点培养数据表。
CSS 样式穿透
XYX8958的博客
08-23 414
一般情况下，是在项目中引入了第三方的 UI 库（例如：ElementUI）时，我们需要通过“样式穿透”来更改样式。
vue ref和reactive区别
灰海
08-25 566
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
前端开发攻略---在Vue3项目中修改Element-Plus主题色
nibabaoo的博客
08-22 248
在Vue3项目中修改Element-Plus主题色
零基础5分钟上手亚马逊云科技-云原生架构设计
m0_66628975的博客
08-26 1394
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 384
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 334
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
微信小程序CSS3动画解析：双块舞效果
本文主要介绍了如何在微信小程序中使用CSS3实现几个有趣的动画效果，特别是双块舞动画的实现过程。 微信小程序允许开发者通过引入CSS3特性来创建丰富的视觉效果和动态交互。在这个例子中，我们看到的是一个双块舞...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值