上一波效果图

会动的眼睛.gif

思路：监听鼠标移动事件，获取当前鼠标距离顶部和左边的像素，除一个比例数字得到比例，让眼球top和left为这些比例

HTML

<!--会动的眼睛-->
<view id="box" bindtouchmove="touchMove">
<view class='bigEyes'>
    <view class='smallEyes' style="{{eyeStyle}}" ></view>
</view>
<view class='bigEyes' style="left: 11rem;">
    <view class='smallEyes smallEyes2' style="{{eyeStyle}}" ></view>
</view>
<view class="nose"></view>
<view class="mouseB">
    <view class="mouseS"></view>
</view> 
</view>

CSS

/*
    * 会动的眼睛
*/

#box {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

.bigEyes {
  width: 7rem;
  height: 10rem;
  position: fixed;
  top: 6rem;
  left: 2rem;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.5);
  overflow: hidden;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

.smallEyes {
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 25.5%;
  left: 15.5%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
}

.smallEyes::after {
  content: " ";
  background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(25, 10, 0.5));
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 30% 30%;
  border-radius: 50%;
}

.nose {
  margin: 19rem auto 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, 0.3), rgb(192, 132, 4));
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

.mouseB {
  width: 58%;
  height: 5rem;
  margin: 3rem auto;
  overflow: hidden;
}

.mouseS {
  height: 10rem;
  width: 11rem;
  border-radius: 50%;
  border: 5px solid rgba(0, 0, 0, 0.8);
  margin-top: -6rem;
}

JS

  touchMove:function(e){
    let _X = e.changedTouches[0].pageX/15 ,
      _Y = e.changedTouches[0].pageY/15
    // console.log(_X + '--' + _Y)
    this.setData({
      eyeStyle: "top:" + _Y+'%;left:'+_X+'%'
    })
  },

爱心发射biu.gif