鼠标跟随文字阴影效果

鼠标跟随实现文字阴影效果

原创已于 2025-06-27 15:37:28 修改 · 965 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

于 2025-04-24 16:35:56 首次发布

<!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 {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #222;
font-family: 'Arial', sans-serif;
overflow: hidden;
cursor: none;
}

.container {
text-align: center;
padding: 20px;
}

h1 {
font-size: 5rem;
color: #fff;
text-align: center;
transition: text-shadow 0.1s ease-out;
position: relative;
z-index: 10;
}

.cursor {
position: fixed;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
z-index: 100;
}

.website-link {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
padding: 12px 24px;
background: linear-gradient(to right, #FF416C, #FF4B2B);
color: white;
text-decoration: none;
border-radius: 30px;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 20;
}

.website-link:hover {
transform: translateX(-50%) translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
h1 {
font-size: 3rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1 id="text">鼠标移动改变文字阴影</h1>
</div>

<div class="cursor" id="cursor"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const text = document.getElementById('text');
const cursor = document.getElementById('cursor');
const container = document.querySelector('.container');

// 窗口尺寸
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;

// 文字位置
const textRect = text.getBoundingClientRect();
const textCenterX = textRect.left + textRect.width / 2;
const textCenterY = textRect.top + textRect.height / 2;

// 鼠标移动事件
document.addEventListener('mousemove', function(e) {
const mouseX = e.clientX;
const mouseY = e.clientY;

// 更新自定义光标位置
cursor.style.left = mouseX + 'px';
cursor.style.top = mouseY + 'px';

// 计算鼠标与文字中心的距离
const distanceX = mouseX - textCenterX;
const distanceY = mouseY - textCenterY;
const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

// 计算最大可能距离（从中心到角落）
const maxDistance = Math.sqrt(
Math.pow(windowWidth / 2, 2) +
Math.pow(windowHeight / 2, 2)
);

// 计算阴影强度（0-1）
const shadowIntensity = Math.min(distance / (maxDistance * 0.5), 1);

// 计算阴影偏移方向
const angle = Math.atan2(distanceY, distanceX);
const shadowX = Math.cos(angle) * shadowIntensity * 20;
const shadowY = Math.sin(angle) * shadowIntensity * 20;

// 应用多重阴影效果
const shadowCount = 5;
let shadowValue = '';

for (let i = 1; i <= shadowCount; i++) {
const factor = i / shadowCount;
const x = shadowX * factor;
const y = shadowY * factor;
const blur = 2 * factor;
const opacity = (1 - factor) * shadowIntensity;

shadowValue += `${x}px ${y}px ${blur}px rgba(255, 255, 255, ${opacity})`;

if (i < shadowCount) {
shadowValue += ', ';
}
}

text.style.textShadow = shadowValue;

// 背景颜色变化
const bgHue = (shadowIntensity * 120 + 180) % 360;
document.body.style.backgroundColor = `hsl(${bgHue}, 30%, 10%)`;
});

// 窗口大小改变时重新计算中心点
window.addEventListener('resize', function() {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;

const textRect = text.getBoundingClientRect();
textCenterX = textRect.left + textRect.width / 2;
textCenterY = textRect.top + textRect.height / 2;
});

// 鼠标移入页面时显示自定义光标
document.addEventListener('mouseenter', function() {
cursor.style.opacity = '1';
});

// 鼠标移出页面时隐藏自定义光标
document.addEventListener('mouseleave', function() {
cursor.style.opacity = '0';
});
});
</script>
</body>
</html>