html 我怎么能做的css关键帧动画的箭头

drnojrws 于 2023-05-27 发布在其他

关注(0)|答案(1)|浏览(161)

我试着实现这个问题，如果我点击点击按钮，箭头会移动，接触到圆圈，并改变圆圈的颜色。
我试着用CSS关键帧和JavaScript来实现它，但这不起作用。我对关键帧和javascript没有任何概念。我是JavaScript新手。

function hit() {
  var circle = document.getElementById('circle');
  var arrow = document.getElementById('arrow');

  // Calculate the distance between the arrow and the circle's center
  var arrowPos = arrow.getBoundingClientRect();
  var circlePos = circle.getBoundingClientRect();
  var distance = Math.sqrt(Math.pow(arrowPos.left - circlePos.left, 2) + Math.pow(arrowPos.top - circlePos.top, 2));

  // If the distance is less than or equal to the sum of the arrow's width and half of the circle's width, they are touching
  if (distance <= arrow.offsetWidth + circle.offsetWidth / 2) {
    circle.style.backgroundColor = 'green';
  }
}

function reset() {
  var circle = document.getElementById('circle');
  circle.style.backgroundColor = 'blue';
}

.container {
  border: 3px solid black;
  height: 60vh;
  width: 90vh;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  text-align: center;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  margin-left: 12px;
}

.icon-arrow {
  width: 90px;
  height: 3px;
  background-color: black;
  border-radius: 2px;
  position: relative;
  margin-right: 12px;
  animation-name: icon;
  animation-duration: 5s;
}

.icon-arrow:after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: black;
  transform: rotate(45deg);
  position: absolute;
  left: -5px;
  top: 11px;
}

.icon-arrow:before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: black;
  transform: rotate(-45deg);
  position: absolute;
  right: 65px;
  bottom: 9px;
}

.button {
  float: right;
  margin-right: 260px;
  padding-top: 9px;
  width: 20%;
  border-radius: 3px;
}

.button button {
  width: 20%;
  color: white;
  background-color: grey;
  margin-right: 16px
}

@keyframes icon {
  10% {
    top: 0px;
    left: 0px;
  }
}

<body>

  <h1>Bubble App</h1>

  <section class="container">

    <div class="circle"></div>
    <div class="icon-arrow"></div>

  </section>

  <div class="button" role="button">
    <button onclick="hit()">Hit</button>
    <button onclick="reset()">Reset</button><br>
  </div>

</body>

Html

来源：https://stackoverflow.com/questions/76298818/how-can-i-done-the-css-keyframe-animation-for-the-arrow

1条答案

按热度按时间

cx6n0qe31#

下面是一个使用offset的示例

<!DOCTYPE html>
<html>

<head>
  <style>
    #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;
    }
  </style>
</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>
    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";
    });
  </script>
</body>

</html>

赞(0）回复(0）举报 2023-05-27

我来回答

html 我怎么能做的css关键帧动画的箭头

1条答案

相关问题

热门标签

最新问答