CSS 神奇的卡片悬停交互效果

2022 年 7 月 13 日
本文字数：1754 字
阅读完需：约 6 分钟

一个堪称完美用户体验度的产品，离不开交互设计师所做出的巨大贡献，交互设计师的日常离不开特有的思维习惯和经久沉淀下来的设计方法。这些看似简单不起眼的规则，极有可能是一个产品未来能否在巨大的市场中脱颖而出的因素。

今天逛网站看到一个不错的交互设计，文本将展开说明 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）

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/5983a57652ab5212269cb005d】。文章转载请联系作者。

南城FE

关注

还未添加个人签名 2019.02.12 加入

专注前端开发，分享前端知识

发布

暂无评论

创作场景

CSS 神奇的卡片悬停交互效果

实现过程

JS 代码

CSS 代码

最后

南城FE

评论