HTML5 + CSS3 + JavaScript 实现按键令小女孩移动，改变动画效果

2023-09-07 00:31:06

打造互动网页体验：使用 HTML5、CSS3 和 JavaScript 控制动画和动作

在当今快速发展的数字世界中，交互性和动态性是打造引人入胜的网页体验的关键。HTML5、CSS3 和 JavaScript 这三位基石技术携手合作，赋予网页生命力，实现令人惊叹的视觉效果和用户交互。

HTML5：网页的基本构建块

HTML5 是构建网页的骨干。它提供了网页的基本结构，定义了标题、段落、列表和表格等元素。此外，HTML5 还引入了语义化元素，这些元素具有明确的含义，例如 <header>、<main> 和 <footer>，这有助于搜索引擎和屏幕阅读器更好地理解网页内容。

CSS3：赋予网页风格和布局

CSS3 是 CSS 的最新版本，它扩展了网页的样式和布局能力。它提供了动画、过渡、变形和 Flexbox 等强大的功能。通过 CSS3，我们可以创建视觉上引人入胜的网页，具有平滑的动画和响应式布局，可以在各种设备上完美呈现。

JavaScript：交互性的动力源

JavaScript 是一种脚本语言，它赋予网页交互性和动态性。使用 JavaScript，我们可以对用户输入做出响应、验证表单数据、操作 DOM (文档对象模型) 以及执行许多其他任务。它使我们能够创建响应式网页，随着用户的交互而改变其行为。

按鍵控制的動畫效果

為了讓網頁更具互動性，我們可以結合使用 HTML5、CSS3 和 JavaScript 來實現按鍵控制的動畫效果。例如，我們可以創建一個小女孩角色，用按鍵控制她在屏幕上的移動。

按鍵事件處理

使用 HTML5，我們可以使用 onkeydown 和 onkeyup 事件來監聽鍵盤按下和鬆開事件。當用戶按下或鬆開某個按鍵時，對應的事件就會被觸發。

<body onkeydown="keydownHandler(event)" onkeyup="keyupHandler(event)">

動畫效果實現

要實現小女孩移動的動畫效果，我們需要使用 CSS3 的 animation 屬性。animation 屬性可以指定動畫的持續時間、延遲時間、循環次數等。

@keyframes move-up {
  from {
    top: 0px;
  }
  to {
    top: -384px;
  }
}

.girl {
  animation: move-up 1s infinite;
}

代码优化

为了优化代碼，我們可以將重複的代碼提取出來，並使用帶參函數來實現。

function moveGirl(direction) {
  let girl = document.querySelector('.girl');
  let currentPosition = parseInt(girl.style.top);

  switch (direction) {
    case 'up':
      girl.style.top = currentPosition - 32 + 'px';
      break;
    case 'down':
      girl.style.top = currentPosition + 32 + 'px';
      break;
    case 'left':
      girl.style.left = currentPosition - 32 + 'px';
      break;
    case 'right':
      girl.style.left = currentPosition + 32 + 'px';
      break;
  }
}

function keydownHandler(event) {
  switch (event.keyCode) {
    case 38: // up arrow
      moveGirl('up');
      break;
    case 40: // down arrow
      moveGirl('down');
      break;
    case 37: // left arrow
      moveGirl('left');
      break;
    case 39: // right arrow
      moveGirl('right');
      break;
  }
}

function keyupHandler(event) {
  // stop the animation
  girl.style.animation = 'none';
}