关于前端:CSS神奇的卡片悬停交互效果

一个堪称完满用户体验度的产品，离不开交互设计师所做出的巨大贡献，交互设计师的日常离不开特有的思维习惯和经久积淀下来的设计办法。这些看似简略不起眼的规定，极有可能是一个产品将来是否在微小的市场中怀才不遇的因素。

明天逛网站看到一个不错的交互设计，文本将开展阐明 CSS 代码实现过程，最终成果如下图 GIF 所示，为减小 GIF 的大小，去掉了卡片中的内容。

这种卡片在各大官网中呈现的比拟多，介绍产品的品种，零碎的性能，价格的等级等等。然而很多都是纯卡片展现，没有任何给到用户的交互反馈，但像上图所示在用户鼠标挪动的过程中给到一个追随鼠标挪动的光圈，这样就给到了足额的用户的反馈，用户体验失去了极大的晋升。

实现过程

JS 代码

可能追随鼠标挪动，前提就须要获取到鼠标的 X/Y 轴坐标，这一点须要借助于 JS 获取，获取所有的卡片元素，通过监听 onmousemove 鼠标挪动事件计算出每个卡片内的光圈坐标值，这里通过 CSS 自定义属性设置 --mouse-x 和 --mouse-y 到卡片的行内 style 中，稍后将在 CSS 中应用到，整体代码如下：

document.getElementById("cards").onmousemove = e => {for(const card of document.getElementsByClassName("card")) {const rect = card.getBoundingClientRect(),
          x = e.clientX - rect.left,
          y = e.clientY - rect.top;

    card.style.setProperty("--mouse-x", `${x}px`);
    card.style.setProperty("--mouse-y", `${y}px`);
  };
}

CSS 代码

在这里为了保障代码简洁，都是基于伪元素创立，次要是通过设置 radial-gradient() 函数创立径向突变光圈，再联合下面 JS 中设置的 --mouse-x 和 --mouse-y 即可让界面追随鼠标的挪动动起来啦。代码如下：

.card::before {
  background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 3;
}

为了让界面成果更实在，实例网站中用上了 before after 两个伪元素设置了不同的半径值。整体 CSS 代码如下：

:root {--bg-color: rgb(20, 20, 20);
  --card-color: rgb(23, 23, 23);
}

body {
  align-items: center;
  background-color: var(--bg-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
}

#cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;  
  max-width: 916px;
  width: calc(100% - 20px);
}

#cards:hover > .card::after {opacity: 1;}

.card {background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  height: 260px;
  flex-direction: column;
  position: relative;
  width: 300px;  
}

.card:hover::before{opacity: 1;}

.card::before,
.card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card::before {
  background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 3;
}

.card::after {  
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.3),
    transparent 40%
  );
  z-index: 1;
}

.card > .card-content {background-color: var(--card-color);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  inset: 1px;
  padding: 10px;
  position: absolute;
  z-index: 2;
}

HTML 代码

<div id="cards">
  <div class="card">
    <div class="card-content">***</div>
  </div>
  ***
  <div class="card">
    <div class="card-content">***</div>
  </div>
</div>

最初

整体代码拆解就完结了，看完是不是感觉很简略呢，你如果有其余更好的计划欢送留言交换。看完感觉有用，记得点赞珍藏起来吧，说不定哪天就用上啦~

示例链接地址：https://linear.app/features

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）