【恶魔的眼睛】鼠标在哪儿，眼睛就在哪儿！

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

前言

今天外甥女在动画片里面居然看到一个小怪兽，摄像头往哪边移动，小怪兽的眼睛就往哪边看。她看着小怪兽的样子，居然一点都不怕，还说那是假的。。。为了吓唬吓唬她，我决定做一双恶魔的眼睛让她玩玩看。（PS：我是不是有点太坏了！😂）

先来画一双眼睛吧

👉 眼睛主要就是眼白和眼球，所以相对来说就比较简单了

<div id="hitarea">
    <div class="eye">
        <div class="pupil"></div>
    </div>
    <div class="eye">
        <div class="pupil"></div>
    </div>
</div>

👉 眼睛的样式

• 让眼睛定位在一个范围内，方便后面定义鼠标的热区范围。

body{background:#000;margin:0;}
#hitarea{
    position:absolute;
    left:50%;
    margin-left:-250px;
    width:500px;
    height:500px;
}
.eye{
    position:absolute;
    width:100px;
    height:100px;
    background: #fff;
    border-radius:50px;
    left:25%;
    top: 40%;
    pointer-events: none;
}

.eye+.eye{
    left: 55%;
}

.pupil{
    position:relative;
    width:25px;
    height:25px;
    background:#000;
    border-radius:12px;
    left:50%;
    top:50%;
    margin:-12px 0 0 -12px;
    -webkit-transition: all .5s ease;
}

👆 加上黑漆漆的背景，看起来就会有点感觉了。

眨眼睛

👉 干瞪眼的效果就不太好了，为了让眼睛看起来更加真实，就需要让它动起来。

👉 眨眼睛就是给一个半遮罩的黑色背景加上下滑动的效果

👉 每只眼睛都需要来一个眨眼睛的动效

<div class="eyelid"></div>
<div class="eyelid"></div>

.eyelid{
    width:150px;
    height: 100px;
    position:absolute;
    left:20%;
    top: 25%;
    pointer-events: none;
    background: #000;
    -webkit-animation-name:             blink;
    -webkit-animation-duration:         4.5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
    -webkit-animation-direction:        alternate;
    -webkit-animation-delay: 1s;
    -webkit-transition: all .5s ease;

}

.eyelid+.eyelid{
    left: 50%;
}

👆 用css中的animation和transition来控制眼睛的动画效果。

👆 眼睛可以自己眨巴眨巴了，这样看起来是不是有那么点意思了呢！！

因为需要让眼睛动起来，但是我们用纯粹的css去写的话，就需要在眼睛周围加上一个一个的热区，让鼠标进入不同的热区之后，改变眼睛的方向。

在眼睛周围添加热区

• 把热区拆分成 5 * 5 的方格

<div id="a-1" class="hitbox"></div>
<div id="a-2" class="hitbox"></div>
<div id="a-3" class="hitbox"></div>
<div id="a-4" class="hitbox"></div>
<div id="a-5" class="hitbox"></div>
<div id="b-1" class="hitbox"></div>
<div id="b-2" class="hitbox"></div>
<div id="b-3" class="hitbox"></div>
<div id="b-4" class="hitbox"></div>
<div id="b-5" class="hitbox"></div>
<div id="c-1" class="hitbox"></div>
<div id="c-2" class="hitbox"></div>
<div id="c-3" class="hitbox"></div>
<div id="c-4" class="hitbox"></div>
<div id="c-5" class="hitbox"></div>
<div id="d-1" class="hitbox"></div>
<div id="d-2" class="hitbox"></div>
<div id="d-3" class="hitbox"></div>
<div id="d-4" class="hitbox"></div>
<div id="d-5" class="hitbox"></div>
<div id="e-1" class="hitbox"></div>
<div id="e-2" class="hitbox"></div>
<div id="e-3" class="hitbox"></div>
<div id="e-4" class="hitbox"></div>
<div id="e-5" class="hitbox"></div>

.hitbox{
    width:100px;
    height:100px;
    float:left;
}

👉 鼠标进入的css事件就是 hover ，那么我们就可以给热区的样式添加不同的hover事件，然后再给eye不同的动画效果

#a-1:hover ~ .eye > .pupil{
    -webkit-transform: rotate(60deg) translate(-30px);
}

#a-2:hover ~ .eye > .pupil{
    -webkit-transform: rotate(80deg) translate(-30px);
}

#a-3:hover ~ .eye > .pupil{
    -webkit-transform: rotate(90deg) translate(-30px);
}

#a-4:hover ~ .eye > .pupil{
    -webkit-transform: rotate(100deg) translate(-30px);
}

#a-5:hover ~ .eye > .pupil{
    -webkit-transform: rotate(120deg) translate(-30px);
}

👆 这里给了一部分动画效果，更多效果在码上掘金中哦~

👉 眼睛跟随的效果也已经出来了，但是恶魔的样子还没有哦。

👉 我们可以给一个单独的热区添加一个单独的眼睛效果。

.hitbox:hover ~ .eyelid{
    -webkit-transform: rotate(-10deg);
}
.hitbox:hover ~ .eyelid:nth-of-type(2n+1){
    -webkit-transform: rotate(10deg);
}
#c-3:hover ~ .eyelid{
    -webkit-transform: rotate(15deg);
}
#c-3:hover ~ .eyelid:nth-of-type(2n+1) {
    -webkit-transform: rotate(-15deg);
}
#c-3:hover ~ .eye > .pupil{
    background: red;
    -webkit-transform: rotate(180deg) translate(-25px);
}

码上掘金看效果