如何创建一个动画效果的辐射圆圈当点击一个痣使用CSS

在这个项目的“打鼹鼠游戏”，我必须创造一个视觉效果，当弹出的鼹鼠是“打”。我决定，当我点击鼹鼠，我希望它能创造一个辐射圆动画效果。我试图完成这项任务，只有CSS虽然一些JS启动代码给。
我发布了一个代码片段，我必须发布所有的代码才能使游戏正常运行。正如你所看到的，每当我点击一个“鼹鼠头”，它确实会创建一个圆圈，但它只围绕鼹鼠头div，然后很快消失。它似乎没有创建我想要的动画效果，当你点击头部或该地区，它将产生如下图所示的效果：

如果我有太多的代码或没有格式化任何正确的东西，我提前道歉。杰克已经提供了一个解决方案，并亲切地给了我一个解决方案，只是圆圈，但我已经提供了我的问题。

let score = 0;
let molesLeft = 30;
let popupLength = 3000;
let hideTimeout;
let clickable = false;

function popUpRandomMole() {
  if (molesLeft <= 0) {
    document
      .querySelector(".sb__game-over")
      .classList.remove("sb__game-over--hidden");
    return;
  }

  const moleHeads = document.querySelectorAll(".wgs__mole-head");

  if (moleHeads.length === 0) {
    return;
  }
  const moleIndex = Math.floor(Math.random() * moleHeads.length);
  const moleHead = moleHeads[moleIndex];

  clickable = true;

  // UNCOMMENT THIS LINE OF CODE WHEN DIRECTED
  moleHead.classList.remove(
    "wgs__mole-head--hidden",
    "wgs__mole-head--whacked"
  );

  molesLeft -= 1;
  document.querySelector(".sb__moles").innerHTML = molesLeft;

  hideTimeout = setTimeout(() => hideMole(moleHead), popupLength);
}

function hideMole(mole) {
  clickable = false;
  mole.classList.add("wgs__mole-head--hidden");

  setTimeout(popUpRandomMole, 500);
}

window.addEventListener("DOMContentLoaded", () => {
  setTimeout(popUpRandomMole, 0);

  const moleHeads = document.querySelectorAll(".wgs__mole-head");
  for (let moleHead of moleHeads) {
    moleHead.addEventListener("click", (event) => {
      if (!clickable) return;
      score += 1;
      document.querySelector(".sb__score").innerHTML = score;
      popupLength -= popupLength / 10;

      clearTimeout(hideTimeout);
      hideMole(event.target);

      // UNCOMMENT THIS LINE OF CODE WHEN DIRECTED
      event.target.classList.add("wgs__mole--hidden");

      // UNCOMMENT THIS LINE OF CODE WHEN DIRECTED FOR THE BONUS
      event.target.classList.add("wgs__mole-head--whacked");
    });
  }
});

/* Your code here */
.wgs {
  height: 241px;
  position: relative;
  width: 320px;
  display: inline-block;
  overflow: hidden;
}

.wgs__mole-head {
  position: absolute;
  height: 178px;
  width: 188px;
  left: 55px;
  transition: margin-top 0.25s;
}

.wgs__dirt-pile {
  position: absolute;
  height: 110px;
  width: 320px;
  top: 130px;
}

.wgs__mole-head--hidden {
  margin-top: 482px;
}

.pf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
}

/* UNCOMMENT THE CODE BELOW WHEN DIRECTED */
.sb {
  background-color: cornflowerblue;
  border-bottom: 1px solid #645ded;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  font-size: 30px;
  margin-bottom: 50px;
  padding: 10px 20px;
}

.wgs__mole-head--whacked {
  border-radius: 50%;
  border: 5px solid blue;
  position: absolute;
  opacity: 0;
  animation: circle 1s ease-out;
  width: 20px;
  box-sizing: border-box;
  pointer-events: none;
  aspect-ratio: 1/1;
  transform: translateX(-50%) translateY(-50%);
}

@keyframes circle {
  0% {
    width: 20px;
    opacity: 1;
  }

  100% {
    width: 100px;
    opacity: 0.2;
  }
}

*/ .sb__mole-counter {
  flex: 1 0 0;
  text-align: right;
}

.sb__score-holder {
  flex: 1 0 0;
}

.sb__game-over--hidden {
  display: none;
}

<link href="https://github.com/RandyGoldsmith/practice-for-prepwork-css-whack-a-mole/blob/main/mole.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mole.css" />
    <script type="text/javascript" src="mole.js"></script>
  </head>
  <body>
    <div class="pf">
      <div class="wgs">
        <img
          src="https://png.pngtree.com/png-clipart/20210425/original/pngtree-mole-head-vector-png-image_6256794.png"
          class="wgs__mole-head wgs__mole-head--hidden wgs__mole-head--whacked"
        >
        <img src="https://static.wikia.nocookie.net/scribblenauts/images/a/a8/Mole_Hill.png/revision/latest?cb=20140412011314" class="wgs__dirt-pile" >
      </div>
      <div class="wgs">
        <img
          src="https://png.pngtree.com/png-clipart/20210425/original/pngtree-mole-head-vector-png-image_6256794.png"
          class="wgs__mole-head wgs__mole-head--hidden wgs__mole-head--whacked">
        <img src="https://static.wikia.nocookie.net/scribblenauts/images/a/a8/Mole_Hill.png/revision/latest?cb=20140412011314" class="wgs__dirt-pile">
      </div>
      <div class="wgs">
        <img
          src="https://png.pngtree.com/png-clipart/20210425/original/pngtree-mole-head-vector-png-image_6256794.png"
          class="wgs__mole-head wgs__mole-head--hidden wgs__mole-head--whacked">
        <img src="https://static.wikia.nocookie.net/scribblenauts/images/a/a8/Mole_Hill.png/revision/latest?cb=20140412011314" class="wgs__dirt-pile">
      </div>
      <div class="wgs">
        <img
          src="https://png.pngtree.com/png-clipart/20210425/original/pngtree-mole-head-vector-png-image_6256794.png"
          class="wgs__mole-head wgs__mole-head--hidden wgs__mole-head--whacked">
        <img src="https://static.wikia.nocookie.net/scribblenauts/images/a/a8/Mole_Hill.png/revision/latest?cb=20140412011314" class="wgs__dirt-pile">
      </div>
      <div class="wgs">
        <img
          src="https://png.pngtree.com/png-clipart/20210425/original/pngtree-mole-head-vector-png-image_6256794.png"
          class="wgs__mole-head wgs__mole-head--hidden wgs__mole-head--whacked">
        <img src="https://static.wikia.nocookie.net/scribblenauts/images/a/a8/Mole_Hill.png/revision/latest?cb=20140412011314" class="wgs__dirt-pile">
      </div>
      <div class="wgs">
        <img
          src="https://png.pngtree.com/png-clipart/20210425/original/pngtree-mole-head-vector-png-image_6256794.png"
          class="wgs__mole-head wgs__mole-head--hidden wgs__mole-head--whacked">
        <img src="https://static.wikia.nocookie.net/scribblenauts/images/a/a8/Mole_Hill.png/revision/latest?cb=20140412011314" class="wgs__dirt-pile">
      </div>
      <div class="wgs wgs__mole--whacked">
        <img
          src="https://png.pngtree.com/png-clipart/20210425/original/pngtree-mole-head-vector-png-image_6256794.png"
          class="wgs__mole-head wgs__mole-head--hidden wgs__mole-head--whacked">
        <img src="https://static.wikia.nocookie.net/scribblenauts/images/a/a8/Mole_Hill.png/revision/latest?cb=20140412011314" class="wgs__dirt-pile">
      </div>
      <div class="wgs">
        <img
          src="https://png.pngtree.com/png-clipart/20210425/original/pngtree-mole-head-vector-png-image_6256794.png"
          class="wgs__mole-head wgs__mole-head--hiddenwgs__mole-head--whacked">
        <img src="https://static.wikia.nocookie.net/scribblenauts/images/a/a8/Mole_Hill.png/revision/latest?cb=20140412011314" class="wgs__dirt-pile">
      </div>
    </div>

    <div class="sb">
      <div class="sb__score-holder">Score <span class="sb__score">0</span></div>
      <div class="sb__game-over sb__game-over--hidden">Game Over</div>
      <div class="sb__mole-counter">
        Moles <span class="sb__moles">30</span>
      </div>
    </div>
  </body>
</html>

很难说出所有的问题到底是什么--像“关键帧不工作”这样的话并不是很有描述性（特别是你说动画太快了，这让关键帧看起来像是在工作）。我猜这至少部分是因为你把你的圆从300*.5 = 150 px宽缩放，在2秒内一路上升到300* 2. 5 = 850 px。这看起来会相当快。
您提供的源代码是一个很好的开始，但它有一些问题，并没有很好地说明您的整体问题。我试图把它放在一个Fiddle只是玩玩，但马上HTML是不合法的格式，你没有包括popUpRandomMole的定义，所以JS也不能运行。
因此，我做了一个简单的实现，来演示如何在单击事件上实现扩展圆圈效果：

var container = document.getElementById("container");
var moles = document.getElementsByClassName("molehead");

for (let mole of moles)
{
    mole.addEventListener("click", onClick);
}

function onClick(event){
    var radiatingCircleEl = document.createElement("div");
  radiatingCircleEl.classList.add("radiating");
  
  radiatingCircleEl.style.top = event.offsetY + event.currentTarget.offsetTop + "px";
  radiatingCircleEl.style.left = event.offsetX + event.currentTarget.offsetLeft + "px";
  
  container.appendChild(radiatingCircleEl);
  setTimeout(() => radiatingCircleEl.remove(), 900);  // delete the circle after 900ms, so we dont fill up our DOM
  
  event.stopPropagation();
}

.molehead{
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: brown;
}

#container{
  display: flex;
  position: relative;
  border: 1px solid lightgrey;
}

.radiating{
  border-radius: 50%;
  border: 5px solid blue;
  position: absolute;
  animation: radiate 1s ease-out;
  aspect-ratio: 1/1;
  width: 20px;
  box-sizing: border-box;
  transform: translateX(-50%) translateY(-50%);  /* center the circle */
  pointer-events: none;
}

@keyframes radiate{
  0%{
    opacity: 1;
    width: 20px;
  }
  100%{
    opacity: .2;
    width: 100px;
  }
}

<div id="container">
  <div class="molehead">
    This is a mole
  </div>
  <div class="molehead">
    This is a mole
  </div>

</div>

希望这能给你一些关于如何继续前进的想法。如果没有，请再检查一遍你的代码，试着把它变成一个工作的minimal reproducible example，最好是作为一个堆栈溢出片段（如我上面提供的），我很乐意仔细看看并帮助你调试它。

如何创建一个动画效果的辐射圆圈当点击一个痣使用CSS

1条答案

相关问题

热门标签

最新问答