首页 > 文章 > 前端

CSS动画与JS箭头碰撞实现方法

时间：2025-10-04 20:15:34 215浏览收藏

想学习如何用 **CSS动画** 和 **JavaScript** 实现酷炫的网页交互效果吗？本文将手把手教你打造一个箭头碰撞圆形并改变颜色的动画！我们将详细讲解实现该效果所需的 **HTML** 结构、**CSS** 样式以及 **JavaScript** 代码逻辑，包括如何创建圆形和箭头元素，如何使用 CSS 设置动画效果，以及如何利用 JavaScript 监听点击事件并控制动画的触发和重置。更有完整代码示例，助你快速掌握 **前端开发** 技巧，轻松实现动态的网页效果！无论你是 **CSS** 爱好者还是 **JS** 新手，都能从中受益。

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

本文将指导你如何使用 CSS Keyframe 动画和 JavaScript创建一个箭头移动并碰撞圆形，然后改变圆形颜色的效果。我们将详细讲解 HTML 结构，CSS 样式以及 JavaScript 逻辑，并提供完整的代码示例，帮助你理解和实现该动画效果。

HTML 结构

首先，我们需要创建包含圆形和箭头的 HTML 结构。使用 div 元素来表示圆形和箭头，并将它们放置在一个容器中。

<!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>

在这个结构中：

container div 用于包含圆形和箭头。
circle div 表示圆形。
arrow div 表示箭头。
hitButton 和 clearButton 按钮分别用于触发动画和重置动画。
style.css是用于存放css样式的文件
script.js是用于存放js代码的文件

CSS 样式

接下来，我们使用 CSS 来设置圆形和箭头的样式，包括位置、大小、颜色等。

/* style.css */
#container {
  position: relative;
  width: 300px;
  height: 150px;
}

#circle {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  transition: background-color 0.5s;
}

#arrow {
  position: absolute;
  top: 50%;
  left: 250px;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 10px;
  background-color: black;
  transition: left 0.5s;
}

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

.button {
  margin-top: 10px;
}

关键样式解释：

position: absolute 用于定位圆形和箭头。
transform: translate(-50%, -50%) 用于将圆形和箭头的中心点对齐。
border-radius: 50% 使 circle 元素变成圆形。
transition 属性使颜色和位置的变化更加平滑。
#arrow:before 使用 CSS 伪元素创建一个箭头。

JavaScript 交互

现在，我们使用 JavaScript 来实现点击 "Hit" 按钮时，箭头移动到圆形并改变圆形颜色的效果。

// script.js
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";
});

JavaScript 代码解释：

首先，获取圆形、箭头、"Hit" 按钮和 "Clear" 按钮的 DOM 元素。
为 "Hit" 按钮添加点击事件监听器。
在点击事件处理函数中，计算箭头应该移动到的位置，然后设置箭头的 left 样式属性，使其移动到该位置。
同时，改变圆形的背景颜色为绿色。
为 "Clear" 按钮添加点击事件监听器，用于重置箭头位置和圆形颜色。

完整代码

将上述 HTML、CSS 和 JavaScript 代码组合在一起，即可实现箭头碰撞圆形并改变颜色的动画效果。

HTML (index.html):

<!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 (style.css):

#container {
  position: relative;
  width: 300px;
  height: 150px;
}

#circle {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  transition: background-color 0.5s;
}

#arrow {
  position: absolute;
  top: 50%;
  left: 250px;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 10px;
  background-color: black;
  transition: left 0.5s;
}

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

.button {
  margin-top: 10px;
}

JavaScript (script.js):

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";
});

注意事项

确保 HTML 文件中正确引入 CSS 和 JavaScript 文件。
可以根据需要调整 CSS 样式，例如修改颜色、大小、位置等。
JavaScript 代码中的位置计算可能需要根据实际情况进行调整。

总结

通过本教程，你学习了如何使用 CSS Keyframe 动画和 JavaScript 创建一个箭头移动并碰撞圆形，然后改变圆形颜色的效果。你了解了 HTML 结构、CSS 样式以及 JavaScript 逻辑，并获得了完整的代码示例。希望本教程能帮助你更好地理解和应用 CSS 动画和 JavaScript 交互。

好了，本文到此结束，带大家了解了《CSS动画与JS箭头碰撞实现方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！