内容
html部分
<div class="hero">
<h1 contenteditable>🔥WOAH!</h1>
</div>
css部分
<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>
js部分
<script>
const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const factor = 0.4;
function shadowMove(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 xdistance = parseInt((x-width/2)*factor)
const ydistance = parseInt((y-height/2)*factor)
text.style.textShadow = `
${xdistance}px ${ydistance}px 0 rgba(255,0,255,0.7),
${xdistance * -1}px ${ydistance}px 0 rgba(0,255,255,0.7),
${ydistance}px ${xdistance * -1}px 0 rgba(0,255,0,0.7),
${ydistance * -1}px ${xdistance}px 0 rgba(0,0,255,0.7)
`;
}
hero.addEventListener('mousemove',shadowMove)
</script>