本文将指导你如何使用 CSS Keyframe 动画和 JavaScript创建一个箭头移动并碰撞圆形，然后改变圆形颜色的效果。我们将详细讲解 HTML 结构，CSS 样式以及 JavaScript 逻辑，并提供完整的代码示例，帮助你理解和实现该动画效果。
HTML 结构
首先，我们需要创建包含圆形和箭头的 HTML 结构。使用 div 元素来表示圆形和箭头，并将它们放置在一个容器中。
<!DOCTYPE html> <html> <head> <title>Arrow Collision Animation</title> <link rel="stylesheet" href="https://www.php.cn/faq/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="https://www.php.cn/faq/script.js"></script> </body> </html>
在这个结构中：
- container div 用于包含圆形和箭头。
- circle div 表示圆形。
- arrow div 表示箭头。
- hitButton 和 clearButton 按钮分别用于触发动画和重置动画。
- style.css是用于存放css样式的文件
- script.js是用于存放js代码的文件
CSS 样式
接下来，我们使用 CSS 来设置圆形和箭头的样式，包括位置、大小、颜色等。
立即学习“Java免费学习笔记（深入）”；
/* 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 代码解释：
Clay AI
131
Clay AI 是一款可以将人物照片转换为粘土风格图像的AI工具，Clay AI：利用粘土动画让角色栩栩如生
131
查看详情
- 首先，获取圆形、箭头、”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="https://www.php.cn/faq/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="https://www.php.cn/faq/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 javascript java html js ai 点击事件 JavaScript css html JS 事件 dom position border 伪元素 transform transition
大家都在看：
使用 CSS Keyframe 动画和 JavaScript 实现箭头碰撞效果
使用 CSS Keyframes 和 JavaScript 创建箭头动画
使用 CSS Keyframe 动画实现箭头碰撞效果
使用 CSS 调整 API 获取的图片尺寸以实现统一展示
API调用图片响应式布局：CSS实现图片统一尺寸与对齐指南
使用 CSS Keyframes 和 JavaScript 创建箭头动画
使用 CSS Keyframe 动画实现箭头碰撞效果
使用 CSS 调整 API 获取的图片尺寸以实现统一展示
API调用图片响应式布局：CSS实现图片统一尺寸与对齐指南
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容