前端代码写一只会飞的鸟

以下是一个简单的HTML、CSS、JavaScript代码示例，创建一个会飞的鸟动画：

HTML:

<div id="bird-container">
  <img id="bird" src="bird.png" alt="bird">
</div>

CSS:

#bird-container {
  position: relative;
  height: 400px;
  width: 800px;
  background-color: skyblue;
}

#bird {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;
}

JavaScript:

const bird = document.getElementById("bird");

function flap() {
  bird.style.transform = "translate(-50%, -50%) rotate(-20deg)";
  bird.style.transition = "transform 0.2s ease-in-out";
  setTimeout(function() {
    bird.style.transform = "translate(-50%, -50%) rotate(20deg)";
  }, 200);
  setTimeout(function() {
    bird.style.transform = "translate(-50%, -50%)";
  }, 400);
}

document.addEventListener("keydown", function(event) {
  if (event.code === "Space") {
    flap();
  }
});

这个代码创建了一个包含一张鸟图片的div容器，给容器添加了一些CSS样式，使它具有一定的高度和宽度，并设定了背景色为天蓝色。鸟图片的样式使用了绝对定位，并且水平和垂直居中，使其位于容器的正中心。

在JavaScript中，定义了一个名为`flap`的函数，将鸟的图像旋转一定角度，并使用CSS的transition属性实现平滑动画。然后使用setTimeout函数来撤销鸟的旋转，并将它恢复到原始位置。最后，通过使用`keydown`事件监听器来捕获空格键的按下，从而调用`flap`函数。

此代码运行后，按下空格键会触发`flap`函数，从而模拟鸟的煽动翅膀的动作，使鸟像飞行一样动起来。