使用 CSS Keyframe 动画实现箭头碰撞效果-js教程-PHP中文网

使用 CSS Keyframe 动画实现箭头碰撞效果

聖光之護

发布： 2025-09-11 20:53:01

原创

816人浏览过

使用 css keyframe 动画实现箭头碰撞效果

本文档将指导你如何使用 CSS Keyframe 动画和 JavaScript 实现一个简单的箭头碰撞圆形并改变颜色的效果。我们将通过 HTML 结构、CSS 样式以及 JavaScript 代码，详细讲解如何创建动画，以及如何检测碰撞并触发相应的事件。通过学习本文，你将掌握 CSS Keyframe 动画的基本用法，以及 JavaScript 中元素定位和事件处理的方法。

HTML 结构

首先，我们需要创建 HTML 结构。这个结构包含一个容器（container），一个圆形（circle），一个箭头（arrow），以及两个按钮（Hit 和 Clear）。

<!DOCTYPE html>
<html>
<head>
  <title>Arrow Collision Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <div id="circle"></div>
    <div id="arrow"></div>
  </div>

  <button id="hitButton" class="button">Hit</button>
  <button id="clearButton" class="button">Clear</button>

  <script src="script.js"></script>
</body>
</html>

登录后复制

CSS 样式

接下来，我们定义 CSS 样式来设置容器、圆形和箭头的样式，以及按钮的样式。关键在于使用position: absolute;，这样能够精确地控制元素在容器中的位置。

#container {
  position: relative; /* Important for absolute positioning of children */
  width: 300px;
  height: 150px;
  border: 1px solid #ccc; /* Optional: For visual clarity */
}

#circle {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%); /* Vertically center the circle */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  transition: background-color 0.5s; /* Smooth color transition */
}

#arrow {
  position: absolute;
  top: 50%;
  left: 250px;
  transform: translateY(-50%); /* Vertically center the arrow */
  width: 40px;
  height: 10px;
  background-color: black;
  transition: left 0.5s; /* Smooth arrow movement */
}

#arrow:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid black;
}

.button {
  margin-top: 10px;
}

登录后复制

解释：

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

#container: position: relative; 是关键，它允许子元素使用 position: absolute; 相对于容器进行定位。
#circle 和 #arrow: position: absolute; 允许我们将圆形和箭头放置在容器内的特定位置。 transform: translateY(-50%); 用于垂直居中元素。
transition: 添加平滑的过渡效果，使颜色变化和箭头移动更加流畅。

JavaScript 代码

现在，我们编写 JavaScript 代码来处理按钮点击事件，移动箭头，并检测碰撞。

var circle = document.getElementById("circle");
var arrow = document.getElementById("arrow");
var hitButton = document.getElementById("hitButton");
var clearButton = document.getElementById("clearButton");

hitButton.addEventListener("click", function() {
  circleRight = circle.offsetLeft + circle.offsetWidth;
  arrowLeft = circleRight + arrow.offsetWidth - 10; //Adjusted to sub 10px 
  arrow.style.left = arrowLeft + "px";
  circle.style.backgroundColor = "green";
});

clearButton.addEventListener("click", function() {
  arrow.style.left = "250px";
  circle.style.backgroundColor = "blue";
});

登录后复制

解释：

立即学习“前端免费学习笔记（深入）”；