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 https://github.com/zhyjor/animation-css-demos
最后的惯例, 贴上我的博客, 欢迎关注
来源: https://juejin.im/post/5a9bc63f6fb9a028be357720