文章导读

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

作者 2025年9月12日 7

本文将指导你如何使用 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 代码解释：

Tweeze

Tweeze.app是一个AI驱动的个性化新闻简报服务，定位为个人互联网AI阅读助手

查看详情

首先，获取圆形、箭头、”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 Keyframe 动画和 JavaScript 实现箭头碰撞效果使用 CSS Keyframes 和 JavaScript 创建箭头动画使用 CSS Keyframe 动画实现箭头碰撞效果使用 CSS 调整 API 获取的图片尺寸以实现统一展示 API调用图片响应式布局：CSS实现图片统一尺寸与对齐指南

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！