以前查资料的时候注意到别人的博客里有个动漫人物(叫啥不知道)，头部和眼睛可以随着鼠标移动而移动，当时还以为是什么控件之类的，后来学了canvas，这玩意可以直接画出来，现在只实现眼睛的效果。

html,css

<div id="wrapper">
    <div class="face" id="blue">
        <div class="eyes">
            <div class="eye-left">
                <div class="eye-in"></div>
            </div>
            <div class="eye-right">
                <div class="eye-in"></div>
            </div>
        </div>
        <div class="nose">
            <a></a>
            <a></a>
        </div>
        <div class="mouth">
            <div class="tooth" id="tooth1"></div>
            <div class="tooth" id="tooth2"></div>
            <div class="tooth" id="tooth3"></div>
            <div class="tooth" id="tooth4"></div>
        </div>
    </div>
</div>

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div#wrapper {
            width: 100%;
            height: 1500px;
            background-color: #eee;
            text-align: center;
        }

        div.face {
            position: relative;
            top: 20%;
            margin-left: 0px;
            margin-right: 0px;
            width: 200px;
            height: 250px;
            display: inline-block;
            overflow: hidden;
            background-color: #2db5ae;
            border-radius: 45% 45% 0 0;
        }


        div.eyes {
            position: relative;
            top: 70px;
            width: 100%;
            height: 80px;
            background-color: #2db5ae;
        }

        div.eye-left {
            position: absolute;
            left: 10%;
            overflow: hidden;
            width: 35%;
            height: 100%;
            background-color: white;
            border-radius: 45% 45% 55% 55%;
        }

        div.eye-right {
            position: absolute;
            right: 10%;
            overflow: hidden;
            width: 35%;
            height: 100%;
            background-color: white;
            border-radius: 45% 45% 55% 55%;
        }

        div.eye-in {
            position: relative;
            display: inline-block;
            width: 45%;
            height: 55%;
            margin-right: 0;
            margin-left: 0;
            margin-top: 20px;
            background-color: black;
            border-radius: 50% 50%;
        }

        div.nose {
            position: relative;
            top: 32%;
            text-align: center;
        }

        div.nose a {
            display: inline-block;
            background-color: white;
            height: 10px;
            width: 10px;
            border-radius: 5px;
        }

        div.mouth {
            position: relative;
            top: 90px;
            width: 100%;
            height: 25%;
            display: inline-block;
            overflow: hidden;
            text-align: center;
            background-color: #614030;
            border-radius: 81% 5% 81% 5%;
        }

        div.tooth {
            position: relative;
            height: 50px;
            width: 35px;
            display: inline-block;
            margin-left: -7px;
            background-color: white;
            border-radius: 0 0 50% 50%;
        }

        div #tooth1 {
            top: 0px;
        }

        div #tooth2 {
            top: -5px;
        }

        div #tooth3 {
            top: -10px;
        }

        div #tooth4 {
            top: -15px;
        }
    </style>

JS

<script>
    window.onload = function () {

        // first Step  

        // 动态语言直接 var eyes = document.querySelectorAll(".eye-in");
        var eyes = [];
        eyes = document.querySelectorAll(".eye-in");

        // second Step  为元素添加事件处理
        document.onmousemove = function (event) {
            var mouseLeft = event.clientX,
                mouseTop = event.clientY;
            // console.log(getViewportSize().height);

            throttle(function () {
                $forEach(eyes, function (o, i) {
                    var chaX = mouseLeft - getOffset(eyes[i]).left;
                    var chaY = mouseTop - getOffset(eyes[i]).top;
                    var viewportWidth = getViewportSize().width / 2;
                    var viewportHeight = getViewportSize().height / 2;
                    //mouseLeft 与 mouseTop的值有时候太小，导致差值太小
                    eyes[i].style.left = ((chaX / viewportWidth) * 50) + "%";
                    eyes[i].style.top = ((chaY / viewportHeight) * 50) + "%";
                })
            }
            )
        }

        // 要用到的函数
        function throttle(method, context) {
            clearTimeout(method.tId);
            method.tId = setTimeout(function () {
                method.call(context);
            }, 70);
        }


        function $forEach(arr, callback, thisp) {
            if (arr.forEach) {
                arr.forEach(callback, thisp);
            } else {
                for (var i = 0, len = arr.length; i < len; i++) {
                    callback.call(thisp, arr[i], i, arr);
                }
            }
        }


        // 单位
        function getOffset(element) {
            var actualLeft = element.offsetLeft;
            var actualTop = element.offsetTop;
            // var actualTop = element.offsetWidth / 2;
            // var actualLeft = element.offsetHeight /2;
            var current = element.offsetParent;

            while (current !== null) {
                actualTop += current.offsetTop;
                actualLeft += current.offsetLeft;
                current = current.offsetParent;
            }

            return { left: actualLeft, top: actualTop };
        }

        function getViewportSize() {
            var pageWidth = window.innerWidth,
                pageHeight = window.innerHeight;

            if (typeof pageWidth != "number") {
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            } else {
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
            // console.log(pageWidth);
            return { width: pageWidth, height: pageHeight }
        }
    }

</script>

这里还有一种方法就是获取到眼睛（x，y）坐标，用atan2（）这个函数计算出与点（0,0）的弧度，然后转换成角度，最后用transform:rotate（）
干一行，爱一行，学到老，活到老~