-- 一不小心发现掘金网的小彩蛋、哈哈！
把鼠标放在个人主页头像上，你会看到下面这种情况

再次更新: 经大佬们提醒，是我想太多了，直接F12就可以看到源码

.user-info-block .avatar[data-v-4cdfa676]:hover {
    -webkit-transform: rotate(666turn);
    transform: rotate(666turn);
    transition-delay: 1s;
    transition-property: all;
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34,0,.84,1);
}

更新： 根据观察猜测整个动画应该是持续60s,ease-in-out缓进缓出，并没有我想的复杂，直接就是一个动画
(有毒啊~都把我转晕了)

animation: avatar01Spin 60s ease-in-out 1;
@keyframes avatar01Spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(152000deg);//60s转了422.2222圈....随机设置的
    }
}

这个用css实现起来比较简单，简单说一下我的思路：
在把鼠标放在头像上时，其实时慢慢加速的，大概在第三秒的时候开始匀速旋转了，我用一个简单粗暴的方法模拟，两个css3 动画顺序播放。先看看html结构：

<div class="avatarimg">
    <img src="" class="avatar">
</div>

接着css样式

@keyframes avatarSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(3600deg);
    }
}

接着把这个动画用在avatarimg上，就是把鼠标移上去就开始旋转

ease-in 缓进旋转

/* 旋转动画 */
.avatarimg:hover {
    animation: avatarSpin 3s ease-in;
    animation-iteration-count: 1;
}

animation 参数无非就是动画名持续时间缓动ease-in 循环一次这个动画结束后，紧接着很快速的匀速旋转

linear匀速旋转

.avatar:hover {
    animation: avatarSpin 1.5s linear ;
    animation-delay: 3s;
    animation-iteration-count: infinite;
}

这个是持续时间1.5s 线性动画延迟3s 无限循环

当然这些动画只有把鼠标放上去才会生效：hover

就这么简单...没了...是不是很有意思啊~~~哈哈
详细的看我的GitHub --eater-egg--