HTML - 浅易版打字练习

1. 赛博朋克风格的视觉计划

  

• 颜色与渐变：通过linear-gradient设置了配景的颜色渐变，使用高饱和度的霓虹色彩（如橙色、绿色和蓝色）来营造赛博朋克的视觉结果。这种配色方案是赛博朋克风格的范例元素。
    
  
• 立体感和阴影：使用 box-shadow 为字符方框添加阴影，使其看起来具有肯定的立体感和浮动感，模仿电子装备或键盘按键的结果。
    
  
• 文本阴影：通过 text-shadow 给字符添加阴影，增强了赛博朋克风格的霓虹灯结果。这种结果在高对比度的配景下尤其突出，营造出假造天下的视觉结果。
  
  

2. 动态结果与动画

  

• Glitch动画：使用 @keyframes 界说了 glitch 动画，通过clip-path和transform模仿文本的抖动和错位，营造出电子干扰（glitch）的结果。这种故障结果是赛博朋克风格中常见的表现情势，模仿了数字天下中不稳固的电子信号。
    
  
• 伪元素 ::after：使用 ::after 伪元素在每个字符方框后叠加一个内容雷同的元素，通过visibility控制表现与隐蔽，并在鼠标悬停时触发 glitch 动画，使其看起来像是字符发生了刹时故障。
  
  

3. 交互与相应

  

• 鼠标悬停结果：在 .character-box:hover::after 中界说了鼠标悬停时的动画结果，当用户将鼠标悬停在字符方框上时，伪元素 ::after 表现并触发 glitch 结果。这种交互为页面增长了动态元素，使用户的体验更加生动。
    
  
• 按键状态变革：通过CSS类的切换（如 .correct, .incorrect, .highlighted）动态更新字符方框的状态和颜色，及时反馈用户输入的精确性。这种视觉反馈让用户可以或许敏捷相识自己输入的精确与否。
  
  

4. 布局与排版

  

• 容器布局：使用 display: inline-block; 和 text-align: center; 将字符方框、输入框和结果展示地域公道布局。整个页面通过设置 width 和 margin，保持在差别装备和屏幕尺寸上的同等性。
    
  
• 字符方框的计划：每个字符被放置在独立的 .character-box 容器中，使得每个字符都有自己的配景、阴影和动画结果。这种计划不但清楚雅观，还增强了赛博朋克风格的团体感。
  
  

5. JavaScript 动态逻辑

  

• 分页表现：通过JavaScript将长文本拆分为每页100个字符，并在用户打完一页后自动切换到下一页，实现了文本的分页表现，防止内容过于拥挤。
    
  
• 及时输入查抄：JavaScript动态查抄用户输入的每个字符，使用 .correct, .incorrect, .highlighted 类名的切换实现及时的视觉反馈。
  
  

紧张代码：

1. <!DOCTYPE html>
2. <html lang="zh-CN">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>中文打字练习</title>
7.     <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
8.     <style>
9.         body {
10.             font-family: Arial, sans-serif;
11.             text-align: center;
12.             margin-top: 50px;
13.             backg

复制代码