首先我們先來看看html

<div class="hero">
    <h1 contenteditable>?卍煞氣卐?</h1>
</div>

接下來用querySelector選到我們要的?卍煞氣卐?

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
function shadow(e) {
    //shadow效果
}

hero.addEventListener('mousemove', shadow);

接下來我們要使陰影隨著滑鼠移動
所以我們需要取到滑鼠的位置

function shadow(e) {
    const {offsetWidth: width, offsetHeight: height} = hero;
    let {offsetX: x, offsetY: y} = e;
}

這樣可以取到滑鼠所在的位置
但是因為offsetX,offsetY會取到滑鼠在該e.target的座標
而e.target是觸發該事件到的元素
因此如果是在<h1>上mousemove
取到的值就會改變
因此我們需要做出修正

function shadow(e) {
    
    const {offsetWidth: width, offsetHeight: height} = hero;
    //Destructuring Assignment(結構賦予值)
    //相當於 const width = hero.offsetWidth;
    // const height = hero.height;
    let {offsetX: x, offsetY: y} = e;
    if (this !== e.target) {
        x = x + e.target.offsetLeft;
        y = y + e.target.offsetTop;
}

這裡的this是指掛監聽(addEventListener)的元素
因此如果this不等於e.target時
我們需要再加上<h1>到父層左側與頂端的距離
即element.offsetLeft、element.offsetTop

接下來我們要依照滑鼠所在的位置去計算陰影移動的距離

const walk = 300;
//設定移動的最大距離
function shadow(e) {
    const xWalk = Math.round((x / width * walk) - (walk / 2));
    const yWalk = Math.round((y / height * walk) - (walk / 2));
    //用滑鼠所在的座標和`.hero`的寬度去計算移動的距離
    text.style.textShadow = `
    ${xWalk}px ${yWalk}px 0 rgba(0, 0, 255, 0.7),
    ${xWalk * -1}px ${yWalk * - 1}px 0 rgba(0, 255, 0, 0.7),
    ${yWalk}px ${xWalk}px 0 rgba(0, 255, 255, 0.7),
    ${yWalk * -1}px ${xWalk * - 1}px 0 rgba(255, 0, 255, 0.7)
    `;
 }

在調整xWalk、yWalk時，需要扣除walk/2是因為要讓移動距離介於150~-150之間(一半的walk)
這樣才是以.hero的中心點去做變化