一不小心发现掘金小彩蛋

1,926 阅读2分钟

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


再次更新: 经大佬们提醒,是我想太多了,直接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--