ChatGPT打字效果教程：让你的项目充满科技感

2023-12-19 02:47:01

ChatGPT打字效果：赋予您的项目人工智能魅力

了解 ChatGPT 打字效果

ChatGPT 打字效果模仿了 ChatGPT 在思考过程中的打字状态，为您的项目增添智能和人性化的气息。当用户输入文字时，光标持续闪烁，并不断显示“loading”提示，仿佛 ChatGPT 正在理解并响应用户的输入。

实现 ChatGPT 打字效果

实现此效果需要 CSS 和 JavaScript。首先，定义光标样式和“loading”提示的 CSS。然后，使用 JavaScript 控制光标的显示和提示的出现和消失。

代码示例

/* 光标样式 */
.cursor {
  width: 1px;
  height: 15px;
  background-color: #000;
  animation: blink 1s infinite;
}

/* “loading”提示样式 */
.loading {
  display: none;
  position: absolute;
  left: 5px;
  top: -10px;
  font-size: 12px;
  color: #666;
}

/* 动画效果 */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// 获取输入框元素
var input = document.querySelector('input');

// 获取光标元素
var cursor = document.querySelector('.cursor');

// 获取“loading”提示元素
var loading = document.querySelector('.loading');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  // 显示光标
  cursor.style.display = 'block';

  // 显示“loading”提示
  loading.style.display = 'block';

  // 延时隐藏光标和“loading”提示
  setTimeout(function() {
    cursor.style.display = 'none';
    loading.style.display = 'none';
  }, 500);
});