根据指针原点填充的正方形

Question

我正在请求帮助，以解决我认为更容易编码的问题。 我想编写一个当指针悬停在其上并根据指针的方向逐渐“填充”的正方形（如水桶或浴缸......但没有重力！）。也就是说，如果指针来自正方形的右侧，则颜色从右到左填充它，如果指针来自底部，则颜色从下到上填充......等等。

这是一个可以在任何方向填充我的方块的代码，但前提是我更改了一些属性。这是这段代码：

    <div class="square" ></div>

  <style>::after
   .square {
    width: 400px;
    height: 400px;
    border: solid 1px black;
    
    position: relative;

  }
  
  .square::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#3498db, #3498db);
    transform-origin: bottom;
    transform: scaleY(0); 

    transition: transform 0.5s ease; 
}

  
  .square:hover::before {
    transform: scaleY(1); 
    
  }
  </style>

在这里，颜色从下到上填充正方形。通过修改transform-origin:bottom和transform-origin:top，它将从上到下。与左和右相同，并将两个scaleY替换为scaleX，itl将从左到右还是从右到结束？

但是如何将此代码与指示指针原点的某些内容（我想是在 JavaScript 中）结合起来，以便颜色自动沿指针方向填充正方形？

感谢您对初学者的帮助！

迪迪尔

Answer 1

const square = document.getElementById("square");
const el = document.getElementsByClassName("collision");

el[0].addEventListener("mouseenter", (e) => {
  square.style.transform = `rotate(180deg)`;
});

el[1].addEventListener("mouseenter", (e) => {
  square.style.transform = `rotate(90deg)`;
});

el[2].addEventListener("mouseenter", (e) => {
  square.style.transform = `rotate(0deg)`;
});

el[3].addEventListener("mouseenter", (e) => {
  square.style.transform = `rotate(270deg)`;
});

.square,
.square2 {
  position: absolute;
  width: 400px;
  height: 400px;
  border: solid 1px black;
}

.collision:nth-child(odd) {
  position: absolute;
  width: 400px;
  height: 20px;
  border: 1px solid red;
}

.collision:nth-child(even) {
  position: absolute;
  width: 20px;
  height: 400px;
  border: 1px solid blue;
}

.collision:nth-child(1) {
  top: -20px;
}

.collision:nth-child(2) {
  left: -20px;
}

.collision:nth-child(3) {
  bottom: -20px;
}

.collision:nth-child(4) {
  right: -20px;
}

.square::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#3498db, #3498db);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.5s ease;
}

.square:hover::before {
  transform: scaleY(1);
}

<div class="square2">
  <div class="collision"></div>
  <div class="collision"></div>
  <div class="collision"></div>
  <div class="collision"></div>
</div>
<div class="square" id="square"></div>

这段代码的工作原理正如你所说，但如果你移动得太快，它的工作方式就会很奇怪......
我通过在正方形中添加碰撞框来实现您的请求。