阅读 1652

每周一个前端动画之四:掘金头像旋转动画

3月,东亚季风带来了来自太平洋的潮湿空气,趁着小雨的周末,送上每周一个动画系列的第四篇。闲话不说,开始我们的正文。本文分析实现的某些效果,仅仅作为一个思路分享,仅仅作为学习素材使用。

作为重度掘金用户,偶然发现了这个动画,动画实现起来很简单,整理如下,好奇问一句,你发现这个动画了没

源动画效果

掘金个人主页页面,鼠标移动到头像上,头像有一个旋转动画,且旋转有一个明显的加速过程。

实现分析

经过分析,效果的实现有三点

  • 圆形头像怎么实现
  • 旋转效果的实现,怎么确定旋转的角度
  • 旋转的速率有明显的变化,需要确定时间函数

代码实现

设置圆形头像可以通过设置圆角来实现

.avatar {
    border-radius: 50%
}
复制代码

旋转动画的实现可以通过直接使用css动画实现,注意这里在旋转角度上直接选择了圈数turn,IE9.0+,Firefox13.0+以及其他浏览器都支持了该属性(下图),放心使用。

至于旋转时的速度变化,可以直接通过我们前几篇文章就多次提到的时间函数来控制。

.avatar:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1)
}
复制代码

效果展示

关键点解读

本文的动画实现起来并不复杂,个人感觉两个点值得记录一下。一个是圆形头像,可以通过设置圆角实现;另一个是设置旋转的时候可以直接通过turn来设置旋转的圈数;至于时间函数我想应该不用再提及了。

代码已上传到github,欢迎提出Issues。

最后的惯例,贴上我的博客,欢迎关注

关注下面的标签,发现更多相似文章
评论