-- 一不小心发现掘金网的小彩蛋、哈哈!
把鼠标放在个人主页头像上,你会看到下面这种情况
再次更新: 经大佬们提醒,是我想太多了,直接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--