我的博客右下角有一个小Guli的形象，他一直在看左上方的文章。这个是当初设计这个元素的原因，也是在边缘视觉给予用户的焦点暗示。当用户出现分心的时候，因为人类对眼球的视觉捕捉一般都是最快（即便是guli这个形象眼睛与人类相比很奇怪），所以人们在分心的时候看到Guli后很容易拉回视觉焦点到文章上。

但是感觉有点缺少灵魂，首先就是对于鼠标的交互太少了，最开始的时候只有一个css写的鼠标悬浮状态变小，感觉没有交互。后来发现可以通过js重新设置图片src地址来重置播放。

那么就容易多了。

首先一个只播放一遍的Gif+触发事件重新播放的js。

我这里设置成了鼠标悬浮状态会触发

如果你需要click状态时，也可以监听click

完整代码：

可以试试右下角的新gif吧。