请教：页面光标跟随气泡的波动/脉动效果实现方案

核心思路 #

目标页面的波动/脉动效果，本质是让径向渐变的范围（半径）做周期性缩放变化，同时保持跟随光标位置。我们可以通过CSS变量结合CSS动画，或JS动态计算波动值实现，比单纯静态渐变多了「动态缩放」的维度。

改造后的完整实现代码 #

基于你的现有代码修改，同时保留光标跟随与脉动效果：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='radial-gradient'></div>

CSS

body{
  background-color: black;
  margin: 0;
}
.radial-gradient {
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: #202020;
  /* 用CSS变量存储光标位置和波动半径 */
  background: radial-gradient(
    var(--pulse-size) at var(--mouse-x) var(--mouse-y), 
    rgba(52, 152, 219, 0.8), 
    transparent 70%, 
    #202020
  );
  /* 平滑过渡，让光标移动和波动更自然 */
  transition: background 0.1s ease-out;
}
/* 脉动动画：通过修改变量实现半径缩放 */
@keyframes pulse {
  0%, 100% { --pulse-size: 15vmax; }
  50% { --pulse-size: 25vmax; }
}
.radial-gradient {
  animation: pulse 2s ease-in-out infinite;
}

JavaScript

$(document).mousemove(function(event) {
  const windowWidth = $(window).width();
  const windowHeight = $(window).height();
  
  // 保留小数让光标移动更平滑
  const mouseXpercentage = (event.pageX / windowWidth * 100).toFixed(2);
  const mouseYpercentage = (event.pageY / windowHeight * 100).toFixed(2);
  
  // 更新CSS变量控制渐变位置
  $('.radial-gradient').css({
    '--mouse-x': `${mouseXpercentage}%`,
    '--mouse-y': `${mouseYpercentage}%`
  });
});

关键细节解释 #

• CSS变量拆分控制：把光标位置和渐变半径抽为独立变量，让JS负责控制位置、CSS负责动画逻辑，代码更易维护。
• 脉动动画逻辑：通过@keyframes循环修改--pulse-size，让渐变半径在15vmax到25vmax之间缩放；vmax单位自适应窗口大小，保证不同设备效果一致。
• 平滑过渡处理：给background属性加过渡效果，避免光标移动时渐变位置跳变。
• 颜色层次优化：增加透明过渡层，让气泡边缘更柔和，贴近目标页面的视觉效果。

进阶弹性跟随优化（可选） #

如果想要更贴近原页面的「弹性滞后」效果，可以给光标位置加缓动计算：

// 初始化缓动变量
let targetX = 50, targetY = 50;
let currentX = 50, currentY = 50;

$(document).mousemove(function(event) {
  const windowWidth = $(window).width();
  const windowHeight = $(window).height();
  targetX = (event.pageX / windowWidth * 100);
  targetY = (event.pageY / windowHeight * 100);
});

// 用requestAnimationFrame实现平滑缓动
function updatePosition() {
  // 缓动系数，越小越平滑
  const easeFactor = 0.1;
  currentX += (targetX - currentX) * easeFactor;
  currentY += (targetY - currentY) * easeFactor;
  
  $('.radial-gradient').css({
    '--mouse-x': `${currentX.toFixed(2)}%`,
    '--mouse-y': `${currentY.toFixed(2)}%`
  });
  requestAnimationFrame(updatePosition);
}
updatePosition();

内容的提问来源于stack exchange，提问作者Alotofproblemshere