<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Shadow</title>
</head>
<body>
<div class="hero">
<h1 contenteditable>🔥WOAH!</h1>
</div>
<style>
html {
color:black;
font-family: sans-serif;
}
body {
margin: 0;
}
.hero {
min-height: 100vh;
display:flex;
justify-content: center;
align-items: center;
color:black;
}
h1 {
text-shadow: 10px 10px 0 rgba(0,0,0,1);
font-size: 100px;
}
</style>
<script>
const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 30; // 500px
function shadow(e) {
const { offsetWidth: width, offsetHeight: height } = hero;
let { offsetX: x, offsetY: y } = e;
if (this !== e.target) {
x = x + e.target.offsetLeft;
y = y + e.target.offsetTop;
}
const xWalk = Math.round((x / width * walk) - (walk / 2));
const yWalk = Math.round((y / height * walk) - (walk / 2));
text.style.textShadow = `
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
`;
}
hero.addEventListener('mousemove', shadow);
</script>
</body>
</html>
阴影随着鼠标的移动而变化
效果如下
用到了
offset和offset这两个属性代码比较简单,直接放在这里了