首页 > 其他分享> > 我用 JS 和 CSS 实现了 win10 网格悬停效果

我用 JS 和 CSS 实现了 win10 网格悬停效果

2022-04-11 19:03:27 作者：互联网

参考【杏鑫注册】实现

首先让我们看一下最终的网格悬停效果。

观察结果：

光标移到某个网格项附近。
一旦达到网格项的最小距离，边界就会突出显示。
网格项边框上的高亮光强度取决于光标的位置。

因此，很明显，这次的关键在于鼠标事件，尤其是mousemove事件。

HTML

<html>

<head>
  <title>Windows 10 grid hover effect</title>
</head>

<body>
  <h1>Windows 10 Button & Grid Hover Effect</h1>
  <div class="win-grid">
    <div class="win-btn" id="1">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="2">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="3">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="4">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="5">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="6">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="7">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="8">This is a windows hoverable item inside windows grid</div>
    <div class="win-btn" id="9">This is a windows hoverable item inside windows grid</div>
  </div>

</body>

</html>

　　CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");

* {
  box-sizing: border-box;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
}
body {
  background-color: black;
  display: flex;
  flex-flow: column wrap;
  justofy-content: center;
  align-items: center;
}

.win-grid {
  border: 1px solid white;
  letter-spacing: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  text-align: center;
  grid-gap: 1rem;
  padding: 5rem;
}

.win-btn {
  padding: 1rem 2rem;
  text-align: center;
  border: none;
  border-radius: 0px;
  border: 1px solid transparent;
}

button:focus {
  outline: none;
}

document.querySelectorAll(".win-btn").forEach((b) => {

  b.onmouseleave = (e) => {
    e.target.style.background = "black";
    e.target.style.borderImage = null;
  };

  b.addEventListener("mousemove", (e) => {
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left; //x position within the element.
    const y = e.clientY - rect.top; //y position within the element.
    e.target.style.background = `radial-gradient(circle at ${x}px ${y}px , rgba(255,255,255,0.2),rgba(255,255,255,0) )`;
    e.target.style.borderImage = `radial-gradient(20% 75% at ${x}px ${y}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 1 / 1px / 0px stretch `;
  });
});


const body = document.querySelector(".win-grid");
body.addEventListener("mousemove", (e) => {
   //effect logic here
});

对上面的代码做一个简要说明：

HTML代码非常简单，一个容器div是网格，其内部是网格项。
CSS中，我使用CSS网格对每一个网格项进行布局，以使设计支持响应式布局。网格布局有3个项，网格有win-grid类，网格项属于win-btn类。
JS是按钮悬停效果代码。

有意思的地方来了！

难点

当光标进入网格区域内时，我们需要围绕光标的元素达到一个特定的距离。我在我的代码中将此半径或距离值称为offset。坏消息是JS中没有方法可以在某个区域中查找元素，但是好消息是存在一个方法可以找到给定坐标的元素！

该方法就是document.elementFromPoint(x,y)。

它返回位于坐标下作为参数传递的最顶层元素。因此，如果坐标有效，则该方法将返回body或body内部的一些其他元素。

这时你可能要问了，那么我们如何精确地使用这个方法来查找周围附近的元素，以及我们要传递什么坐标呢？

标签：windows,inside,网格,JS,item,grid,win10,我用,255
来源： https://www.cnblogs.com/xingxin666888/p/16131434.html