技术问询：实现仿mattfarley.ca的打字后选中删除局部内容的打字机动画

嘿，我来帮你搞定这个带选中删除的打字机动画！基础的CSS打字机只能实现输入，要加上选中删除的话，我们需要结合CSS动画和一点点JavaScript来控制文本变化与选中状态，下面是完整的实现方案：

第一步：搭建HTML结构 #

我们需要一个容器承载文本，单独给要删除的片段加个标签，方便后续控制选中样式，再加上模拟光标：

<div class="typewriter-container">
  <span class="text">Hello, I'm a </span>
  <span class="highlight">frontend</span>
  <span class="text"> developer.</span>
  <span class="cursor">|</span>
</div>

第二步：编写CSS动画（基于你的基础代码扩展） #

在你已有的代码上，新增选中高亮、删除动画和光标闪烁效果：

/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */
html {
  min-height: 100%;
  overflow: hidden;
  background: #1a1a1a; /* 加个深色背景让效果更明显 */
}
body {
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255, 255, 255, .75);
  font-family: 'Anonymous Pro', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.typewriter-container {
  position: relative;
}

/* 基础打字动画：逐字显示 */
.text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 2s steps(15, end) forwards;
}

/* 高亮删除的片段：依次执行打字、高亮、删除动画 */
.highlight {
  display: inline-block;
  opacity: 0;
  animation: 
    typing 2s steps(8, end) 2s forwards, /* 延迟2秒开始打字显示 */
    highlight 0.5s 4s forwards, /* 延迟4秒开始高亮 */
    delete 0.5s 4.5s forwards; /* 延迟4.5秒开始删除 */
}

/* 光标闪烁效果 */
.cursor {
  display: inline-block;
  animation: blink 1s infinite;
}

/* 打字动画关键帧 */
@keyframes typing {
  from { width: 0; opacity: 1; }
  to { width: 100%; opacity: 1; }
}

/* 选中高亮关键帧：模拟选中时的背景色 */
@keyframes highlight {
  from { background: transparent; }
  to { background: #ffd700; color: #000; }
}

/* 删除动画关键帧：收缩宽度直到隐藏 */
@keyframes delete {
  from { width: 100%; }
  to { width: 0; opacity: 0; }
}

/* 光标闪烁关键帧 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

第三步：可选JS扩展（实现循环切换文本） #

如果想要多轮循环切换不同文本，用JS控制会更灵活，比如：

const container = document.querySelector('.typewriter-container');
// 定义多组文本和对应的要删除的片段
const textGroups = [
  { fullText: "Hello, I'm a frontend developer.", highlightText: "frontend" },
  { fullText: "Hello, I'm a web developer.", highlightText: "web" },
  { fullText: "Hello, I'm a full-stack developer.", highlightText: "full-stack" }
];
let currentGroupIndex = 0;

function renderTextGroup(group) {
  // 清空容器
  container.innerHTML = '';
  // 拆分文本为高亮前后的部分
  const [beforeHighlight, afterHighlight] = group.fullText.split(group.highlightText);
  
  // 创建各个文本元素
  const beforeSpan = document.createElement('span');
  beforeSpan.className = 'text';
  beforeSpan.textContent = beforeHighlight;
  
  const highlightSpan = document.createElement('span');
  highlightSpan.className = 'highlight';
  highlightSpan.textContent = group.highlightText;
  
  const afterSpan = document.createElement('span');
  afterSpan.className = 'text';
  afterSpan.textContent = afterHighlight;
  
  const cursorSpan = document.createElement('span');
  cursorSpan.className = 'cursor';
  cursorSpan.textContent = '|';
  
  // 添加到容器中
  container.appendChild(beforeSpan);
  container.appendChild(highlightSpan);
  container.appendChild(afterSpan);
  container.appendChild(cursorSpan);
  
  // 一轮动画完成后切换下一组文本（总时长6秒）
  setTimeout(() => {
    currentGroupIndex = (currentGroupIndex + 1) % textGroups.length;
    renderTextGroup(textGroups[currentGroupIndex]);
  }, 6000);
}

// 页面加载完成后启动动画
window.addEventListener('load', () => {
  renderTextGroup(textGroups[currentGroupIndex]);
});

效果说明 #

1. 先逐字打出"Hello, I'm a "，接着打出"frontend"，最后打出" developer."
2. 等待片刻后，"frontend"会变成高亮状态（模拟选中效果）
3. 随后高亮片段会收缩消失，完成删除动作
4. 如果用了JS版本，会自动循环切换不同的文本内容，重复整个动画流程

你可以根据自己的需求调整动画时长、颜色、文本内容这些参数，比如把高亮色换成你喜欢的，或者修改打字速度~

内容的提问来源于stack exchange，提问作者Didix