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）