小摩爾來了！5分鐘帶你學會小摩爾眼睛跟隨鼠標移動效果

2021 年 10 月 31 日
筆記
CSS 特效, css特效

6月1號，摩爾莊園手游正式開服，小博主也是第一時間去下載了，真的太好玩了，以致於有了這篇博文，下面來看看如何實現這隻可愛（魔性）的小摩爾吧！！

實現效果

哈哈哈哈哈，這隻小摩爾頭像是不是很魔性呢，博主儘力了！也是很可愛吧~~

實現過程

1. 定義HTML標籤

face是整個圓形臉，eyes是兩個眼睛的外層盒，nose鼻子，mouse嘴巴

<div class="face">
    <div class="eyes">
        <div class="eyeIn">
            <div class="eye"></div>
        </div>
        <div class="eyeIn">
            <div class="eye"></div>
        </div>
    </div>
    <div class="nose"></div>
    <div class="mouse"></div>
</div>

2. 繪製臉型

給定一個400px*400px的圓形臉，背景顏色是一組淺藍色的漸變色

background: linear-gradient(rgb(132, 222, 247), rgb(14, 84, 175))：漸變背景色。
box-shadow：1px 2px 15px white：添加陰影使層次分明。

.face {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: linear-gradient(rgb(132, 222, 247), rgb(14, 84, 175));
    box-shadow: 1px 2px 15px white;
    overflow: hidden;
}

3. 繪製橢圓眼睛

.eyes .eyeIn {
    position: relative;
    width: 60px;
    height: 90px;
    display: block;
    background: linear-gradient(135deg, rgb(82, 83, 83), rgb(14, 15, 15));
    margin: 0 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgb(54, 161, 230);
}

4. 繪製眼珠子

眼珠的繪製採用的是在一個eye盒子里採用偽類，來定義眼珠，這樣可以通過控制eye盒子的大小來調整眼珠的旋轉位置

.eyes .eye {
    position: relative;
    top: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.eyes .eye::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 0px 10px white;
}

5. 繪製嘴巴

通過偽元素來繪製舌頭，雖然很醜，但是起碼有舌頭，不接受反駁！同時給嘴巴添加過渡屬性，使得在鼠標移入時有個過渡的效果

.mouse {
    position: absolute;
    top: 330px;
    width: 70px;
    height: 50px;
    box-shadow: 0px 0px 2px rgb(106, 119, 119);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background: linear-gradient(rgb(244, 71, 78), rgb(201, 20, 25));
    transition: .5s;
}

.mouse::before {
    position: absolute;
    left: 20px;
    content: '';
    width: 30px;
    height: 14px;
    background-color: rgb(245, 237, 230);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

6. 鼠標移入頭像

當鼠標移入小摩爾頭像時，讓小摩爾嘴巴收起來，很魔性吧！

.face:hover .mouse {
    height: 20px;
    transition: .5s;
}

7. 眼睛跟隨鼠標移動

這部分算是小摩爾的靈魂了，實現眼睛跟隨鼠標移動的效果，屬實有點詭異，彷彿有人在盯着你一樣！

這裡涉及到數學問題，需要實現所訴的效果，需要讓鼠標當前位置，以及眼睛圓心的，眼珠圓心三點共線，因此我們先計算圓心的坐標x,y在下面的代碼中採用了getBoundingClientRect()方法

這個方法用來獲取頁面中某個元素的左、上、右、下分別相對瀏覽器視窗的位置，返回的是一個矩形對象，包括四個屬性，分別是left 、top、right、bottom。分別表示元素各邊與頁面上邊和左邊的距離。

clientWidth用來獲取元素的寬度，一半就是圓心所在位置，這樣我們就能獲取到圓心的坐標(x,y)

再通過一個Math下的atan2(X,y)方法，返回點(x,y) 與 x坐標軸的夾角弧度制，我們通過傳入e.pageX - x, e.pageY - y也就是已眼睛圓心為坐標原點時鼠標的坐標，這樣得到的弧度制就是鼠標對應到圓上的直線位置的弧度，也就是眼睛需要旋轉的弧度，這樣就能將眼珠旋轉到相應的位置，就能實現了，在下面的代碼中會發現

let rot = (rad * (180 / Math.PI) * -1) + 270

這裡加270的目的是為了從0deg位置開始計算，而初始位置眼珠在左側

window.addEventListener('mousemove', (e) => {
    let eye = document.querySelectorAll('.eye')
    eye.forEach(eye => {
        // 獲取眼睛圓心坐標
        let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2)
        let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2)
        // 弧度
        let rad = Math.atan2(e.pageX - x, e.pageY - y)
        // 旋轉的角度
        let rot = (rad * (180 / Math.PI) * -1) + 270
        // 通過旋轉使得眼睛移動
        eye.style.transform = 'rotate(' + rot + 'deg)'
    })
})

可愛的小摩爾就完成了，雖然有很多不足的地方，還是挺可愛滴吧~~、

Tags: CSS 特效 css特效