本文将指导你如何使用 CSS Keyframe 动画和 JavaScript 来实现一个简单的动画效果：点击按钮后，箭头移动到圆形并改变圆形的颜色。我们将深入探讨如何设置关键帧动画，以及如何使用 JavaScript 来触发动画和处理碰撞检测，从而实现预期的交互效果。
1. HTML 结构
首先，我们需要创建 HTML 结构来包含圆形、箭头和按钮。
Arrow Animation
在这个结构中，container 用于包含圆形和箭头，circle 和 arrow 分别代表圆形和箭头元素。hitButton 和 clearButton 用于触发动画和重置状态。
2. CSS 样式
接下来，我们定义 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;
}- #container: 设置容器的相对定位，以便内部元素可以使用绝对定位。
- #circle: 设置圆形的位置、大小、颜色和过渡效果。
- #arrow: 设置箭头的位置、大小、颜色和过渡效果。
- #arrow:before: 使用伪元素创建箭头的三角形部分。
- .button: 设置按钮的样式。
3. 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";
});- 首先，获取圆形、箭头和按钮的 DOM 元素。
- 为 hitButton 添加点击事件监听器。当点击按钮时，计算箭头应该移动到的位置，然后设置箭头的 left 属性，并改变圆形的背景颜色。
- 为 clearButton 添加点击事件监听器。当点击按钮时，将箭头恢复到初始位置，并将圆形的背景颜色恢复为蓝色。
4. 完整代码
将以上 HTML、CSS 和 JavaScript 代码整合在一起，就可以实现箭头移动并改变圆形颜色的动画效果。
index.html:
Arrow Animation
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;
}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";
});5. 注意事项
- 确保 HTML 文件正确链接 CSS 和 JavaScript 文件。
- 可以根据需要调整 CSS 样式，例如颜色、大小和位置。
- 可以根据需要修改 JavaScript 代码，例如动画持续时间和碰撞检测逻辑。
- 可以考虑使用 CSS 动画或 JavaScript 动画库来实现更复杂的动画效果。
6. 总结
通过本教程，你学习了如何使用 CSS Keyframe 动画和 JavaScript 来实现一个简单的动画效果。你了解了如何设置关键帧动画，以及如何使用 JavaScript 来触发动画和处理碰撞检测。希望这些知识能够帮助你创建更复杂的交互式 Web 应用。
