【html+css+js】代码绘制粉红眼睛转动小猪（鼠标事件）

本文链接：https://blog.youkuaiyun.com/weixin_45562037/article/details/125667691
效果视频展示：
代码绘制粉红眼睛转动小猪（鼠标事件）-2022-6-7 13:43:58
全部代码（放心粘贴）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .head{
        position: relative;
        width: 600px;
        height: 600px;
        left: 50%;
        margin-left: -300px;
    }
    .head>.lear{
        position: absolute;
        width: 0px;
        height: 0px;
        left: -30px;
        border: 100px solid pink;
        border-radius:  20px 80px 0px 90px;

        transform: rotateZ(-25deg);
    }
    .head>.rear{
        position: absolute;
        width: 0px;
        height: 0px;
        left: 430px;
        border: 100px solid rgb(255, 192, 203);
        border-radius:  80px 15px 90px 0px;

        transform: rotateZ(25deg)
    }
    .head>.face{
        position: absolute;
        width: 500px;
        height: 500px;
        top: 100px;
        left: 50px;
        border: 1px solid black;
        border-radius: 50%;
        background: pink;
    }
    .head>.face>.leye{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 100px;
        left: 100px;
        border: 2px solid black;
        border-radius: 50%;
        background: white;
    }
    .head>.face>.leye>div{
        position: relative;
        width: 50px;
        height: 50px;
        top: 30px;
        left: 20px;
        border: 2px solid black;
        border-radius: 50%;
        background: black;
    }

    .head>.face>.reye{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 100px;
        left: 300px;
        border: 2px solid black;
        border-radius: 50%;
        background: white;
    }
    .head>.face>.reye>div{
        position: relative;
        width: 50px;
        height: 50px;
        top: 30px;
        left: 20px;
        border: 2px solid black;
        border-radius: 50%;
        background: black;
        animation: move 3s 0s infinite; 
    }
    .head>.face>.month{
        position: absolute;
        width: 300px;
        height: 200px;
        top: 250px;
        left: 100px;
        border: 2px solid black;
        border-radius: 45%;

        transform: scale(0.9);
    }
    .head>.face>.month>.lnose{
        position: absolute;
        width: 70px;
        height: 70px;
        top: 55px;
        left: 45px;
        border: 2px solid black;
        border-radius: 50%;
        background: rgb(26, 25, 25);
    }
    .head>.face>.month>.rnose{
        position: absolute;
        width: 70px;
        height: 70px;
        top: 55px;
        left: 175px;
        border: 2px solid black;
        border-radius: 50%;
        background: rgb(26, 25, 25);
    }
</style>
<body>
    <div class="head">
        <div class="lear">
            <div></div>
        </div>
        <div class="rear">
            <div></div>
        </div>
        <div class="face">
            <div class="leye">
                <div></div>
            </div>
            <div class="reye">
                <div></div>
            </div>
            <div class="month">
                <div class="lnose"></div>
                <div class="rnose"></div>
            </div>
        </div>
    </div>
<script>
        document.querySelector('body').addEventListener('mousemove',eyeball)

        function eyeball() {
            var eyeball = document.querySelector('.leye>div');
            var eyeball2 = document.querySelector('.reye>div');
            var event = event || window.event;
            if(event.clientX || event.clientY){
                var x = event.clientX;
                var y = event.clientY;
            }


            if(x < 650){
                eyeball.style.transform = 'translate(-15px)';
                eyeball2.style.transform = 'translate(-15px)';
            }
            else if(x > 750){
                eyeball.style.transform = 'translate(15px)';
                eyeball2.style.transform = 'translate(15px)';
            }
            else if(y > 310){
                eyeball.style.transform = 'translateY(15px)';
                eyeball2.style.transform = 'translateY(15px)';
            }
            else if(y < 260){
                eyeball.style.transform = 'translateY(-15px)';
                eyeball2.style.transform = 'translateY(-15px)';
            }
        }
</script> 
</body>
</html>