使用 CSS Keyframe 动画实现箭头移动并改变圆形颜色-js教程-PHP中文网

使用 CSS Keyframe 动画实现箭头移动并改变圆形颜色

聖光之護

发布： 2025-09-11 21:05:01

原创

292人浏览过

使用 css keyframe 动画实现箭头移动并改变圆形颜色

本文将指导你如何使用 CSS Keyframe 动画和 JavaScript 来实现一个简单的动画效果：点击按钮后，箭头移动到圆形并改变圆形的颜色。我们将深入探讨如何设置关键帧动画，以及如何使用 JavaScript 来触发动画和处理碰撞检测，从而实现预期的交互效果。

1. HTML 结构

首先，我们需要创建 HTML 结构来包含圆形、箭头和按钮。

<!DOCTYPE html>
<html>
<head>
  <title>Arrow 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 用于包含圆形和箭头，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 来处理按钮点击事件，并触发箭头移动和颜色改变。

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

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:

<!DOCTYPE html>
<html>
<head>
  <title>Arrow 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>

登录后复制

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

登录后复制