html 鼠标交换效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Win10通知卡片-边框跟随鼠标光晕</title>
<style>
.card-box{
  background: #1e1e1e;
  padding: 40px;
  font-family: system-ui;
}

.notice-card {
  position: relative;
  width: 420px;
  padding: 20px;
  border-radius: 6px;
  overflow: hidden;
  --mouse-x: 0px;
  --mouse-y: 0px;
}

/* 底层光晕 */
.notice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.4), transparent 70px);
  pointer-events: none;
  opacity: 0;
  /* 只给opacity加过渡，坐标不加过渡，移动顺滑；淡出0.2s */
  transition: opacity 0.2s ease;
}
.notice-card:hover::before {
  opacity: 1;
}

/* 内层遮罩，盖住中间区域，只留边框发光 */
.notice-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  background-color: #2b2b2b;
  border-radius: calc(6px - 2px);
  pointer-events: none;
}

.card-content {
  position: relative;
  z-index: 2;
  color: #ddd;
}
.card-content h3 {
  margin:0 0 8px;
  font-size:18px;
  color:#fff;
}
.card-content p {
  margin:4px 0;
  font-size:14px;
}
</style>
</head>
<body>
<div class="card-box">
<div class="notice-card">
  <div class="card-content">
    <h3>任务完成</h3>
    <p>请返回CodeArts Agent查看详情。</p>
    <p style="color:#aaa">14:30</p>
  </div>
</div>
</div>
<script>
const card = document.querySelector('.notice-card');
let isHover = false;
let resetTimer = null;

card.addEventListener('mousemove', (e)=>{
  // 只有hover状态才更新坐标
  if(!isHover) return;
  const rect = card.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  card.style.setProperty('--mouse-x', `${x}px`);
  card.style.setProperty('--mouse-y', `${y}px`);
});

card.addEventListener('mouseenter', ()=>{
  isHover = true;
  // 清除待执行的重置任务
  if(resetTimer) clearTimeout(resetTimer);
});

card.addEventListener('mouseleave', ()=>{
  isHover = false;
  // 等待opacity过渡完成后，再重置坐标，避免光晕瞬间跳到左上角
  resetTimer = setTimeout(()=>{
    card.style.setProperty('--mouse-x', `0px`);
    card.style.setProperty('--mouse-y', `0px`);
  }, 200); // 和css transition opacity时间保持一致 0.2s
});
</script>
</body>
</html>

　　

Win10通知卡片-边框跟随鼠标光晕（修复移出闪烁）

任务完成

请返回CodeArts Agent查看详情。

14:30