PHP页面本身作为服务端脚本语言，主要负责处理业务逻辑和输出页面内容，而渐变随鼠标动的动效属于前端交互范畴，需要结合CSS3渐变属性和JavaScript鼠标事件监听来实现，PHP只需要正常输出包含对应前端代码的页面即可。
核心实现原理
整个动效的实现分为三个部分：
- PHP负责输出基础HTML页面结构，不需要处理动效相关逻辑
- CSS3定义径向渐变的背景样式，渐变中心点通过CSS变量控制
- JavaScript监听鼠标移动事件，实时获取鼠标坐标并更新CSS变量，实现渐变跟随鼠标变化
完整实例代码
下面是可直接运行的PHP页面代码，将代码保存为gradient_follow.php即可访问查看效果：
<?php
// PHP部分仅做基础页面输出，无特殊逻辑
header("Content-type: text/html; charset=utf-8");
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标跟随渐变效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 定义CSS变量存储渐变中心点坐标，默认居中 */
--mouse-x: 50%;
--mouse-y: 50%;
/* 径向渐变背景，中心点使用CSS变量 */
background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), #ff7eb3, #65c7f7, #9dffb0);
min-height: 100vh;
transition: background 0.1s ease;
}
.content {
padding: 50px;
color: #333;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<h1>PHP页面鼠标跟随渐变动效实例</h1>
<p>移动鼠标可以看到背景渐变中心点跟随变化</p>
</div>
<script>
// 监听鼠标移动事件
document.addEventListener('mousemove', function(e) {
// 计算鼠标在页面中的百分比坐标
const x = e.clientX / window.innerWidth * 100;
const y = e.clientY / window.innerHeight * 100;
// 更新CSS变量
document.body.style.setProperty('--mouse-x', x + '%');
document.body.style.setProperty('--mouse-y', y + '%');
});
</script>
</body>
</html>
代码说明
上述代码中PHP部分仅做了字符集声明和页面输出，核心动效逻辑都在前端部分：
- CSS中通过
radial-gradient设置径向渐变，渐变中心使用--mouse-x和--mouse-y两个CSS变量，初始值设为50%即页面中心 - JavaScript监听
mousemove事件，每次鼠标移动时计算当前鼠标位置占页面宽高的百分比，然后通过setProperty方法更新对应的CSS变量 - CSS的
transition属性让渐变变化更平滑，避免突兀的跳动
扩展优化方向
如果需要更丰富的效果，可以调整以下部分：
- 修改
radial-gradient中的颜色值，自定义渐变配色 - 增加多个渐变图层，通过不同的跟随速度实现层次感
- 结合页面滚动事件，让渐变同时响应鼠标和滚动操作
注意：该动效完全由前端实现，PHP仅作为页面载体，不需要在PHP代码中编写任何动效相关逻辑，若页面需要动态修改渐变配色，可以通过PHP输出不同的CSS变量初始值来实现。
PHP鼠标跟随渐变动效CSS3JavaScript修改时间：2026-07-01 03:30:27