灵动光环：打造耀眼的卡片交互效果

前端

2023-07-07 20:58:49

卡片交互：通过发光边角框悬停效果提升用户体验

什么是卡片交互效果？

卡片交互效果是一种常见的用户界面设计模式，它使交互成为可能，通常通过鼠标悬停或点击实现。这些效果有助于吸引用户，提供额外的信息，并触发各种操作，例如打开链接或展开内容。

发光边角框悬停效果

发光边角框悬停效果是一种引人注目的卡片交互效果，它在鼠标悬停在卡片上时创建了一个动态的径向渐变光圈，突出显示卡片的边框。这种效果提高了卡片的视觉吸引力，帮助用户快速识别和关注相关内容。

创建发光边角框悬停效果

要创建发光边角框悬停效果，需要结合使用 CSS 和 JavaScript。CSS 定义了卡片的样式，而 JavaScript 处理鼠标移动事件并控制光圈的动画效果。以下是一个示例代码，展示了如何实现这种效果：

HTML 代码：

<div class="card">
  <div class="card-content">
    <h1>卡片标题</h1>
    <p>卡片内容</p>
  </div>
</div>

CSS 代码：

.card {
  width: 200px;
  height: 200px;
  padding: 20px;
  margin: 20px;
  background-color: #fff;
  border: 1px solid #000;
}

.card:hover {
  border-color: #f00;
  box-shadow: 0 0 10px #f00;
}

.card-content {
  padding: 20px;
}

JavaScript 代码：

const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const width = card.offsetWidth;
    const height = card.offsetHeight;

    const gradient = `radial-gradient(circle at ${x}px ${y}px, #f00, transparent)`;

    card.style.background = gradient;
  });
});