【头像转圈儿】掘金个人主页鼠标悬停头像旋转特效

今天逛掘金摸鱼时突然发现，鼠标悬停在头像上是可以转的！而且他转的时候还有一个明显的加速过程。

假装此处有动图-

这就勾引起我的好奇心了，这还挺有趣的小彩蛋。于是我F12找到了它的实现方式。

首先是圆形头像，这个简单

border-radius: 50%;

然后就是旋转了

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

仔细看过之后，才发现原来这么简单。

transform: rotate(666turn)：定义了transform的2d旋转，turn表示 圈(单位) 。
transition-delay：定义了延时多长时间执行。
transition-property：指定具有过渡效果的css属性
transition-duration：定义了执行时间。
transition-timing-function：定义了执行速度。