一款堪称完美用户体验的产品，离不开交互设计师的巨大贡献。交互设计师的日常，离不开独特的思维习惯和长期的沉淀。设计方法。这些看似简单、不起眼的规则，极有可能成为决定一款产品能否在未来庞大市场中脱颖而出的因素。今天访问该网站，我看到了一个很好的交互设计。文中将展开讲解CSS代码实现过程。最终效果如下图GIF所示。为了减小GIF的尺寸，卡片中的内容被去掉了。这类卡片在各大官网出现较多，介绍产品类型、系统功能、价格水平等。但是很多都是纯卡片展示，没有给用户任何交互反馈，但是如上图所示，当用户移动鼠标时，给一个光圈跟随鼠标移动，给了足够的用户反馈。用户体验有了很大的提升。在执行过程中，JS代码可以跟随鼠标的移动。前提是获取鼠标的X/Y轴坐标。这个需要借助JS获取所有卡片元素，通过监听onmousemove鼠标移动事件计算出每张卡片中的孔径。坐标值，这里通过css自定义属性设置--mouse-x和--mouse-y为卡片的内联样式，后面css中会用到，整体代码如下：document.getElementById("cards").onmousemove=e=>{for(constcardofdocument.getElementsByClassName("card")){constrect=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()函数创建径向渐变光圈，结合--mouse-x和--上面JS中设置的mouse-y可以让界面随着鼠标的移动而移动。代码如下：.card::before{background:radial-gradient(800pxcircleatvar(--mouse-x)var(--mouse-y),rgba(255,255,255,0.06),transparent40%);z-index:3;}为了让界面效果更逼真，示例网站中使用了前后两个伪元素来设置不同的半径值。整体CSS代码如下：:root{--bg-color:rgb(20,20,20);--card-color:rgb(23,23,23);}body{align-items:center;背景色：var(--bg-color)；显示：弹性；高度：100vh；证明内容：居中；边距：0px；溢出：隐藏；填充：0px；}#cards{显示：flex；弹性包装：包装；间隙：8px；最大宽度：916px；宽度：calc(100%-20px);}#cards:hover>.card::after{opacity:1;}.card{background-color:rgba(255,255,255,0.1);边界半径：10px；游标：指针；显示：弹性；高度：260px；弹性方向：列；位置：相对；宽度：300px；}.card:hover::before{opacity:1;}.card::before,.card::after{border-radius:inherit;内容：””;高度：100%；左：0px；不透明度：0；位置：绝对；顶部：0px；过渡：不透明度500ms；width:100%;}.card::before{background:radial-gradient(800pxcircleatvar(--mouse-x)var(--mouse-y),rgba(255,255,255,0.06),透明40%);z-index:3;}.card::after{background:radial-gradient(600pxcircleatvar(--mouse-x)var(--mouse-y),rgba(255,255,255,0.3),透明40%);z-index:1;}.card>.card-content{背景色:var(--card-color);边界半径：继承；显示：弹性；弹性方向：列；弹性增长：1；插图：1px；填充：10px；位置：绝对；z-index:2;}HTML代码
