掘金头像旋转动画

Posted on Edited on In

掘金头像旋转动画

参考文章或者地址

文章

掘金头像地址

模仿地址

代码实现

1
2
# 结构
<div class="avatar"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 样式
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  background-image: url(https://avatars2.githubusercontent.com/u/24250627?s=460&v=4);
  background-size: cover;
}

.avatar: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)
}

资料参考

turn

转、圈（Turns）。一个圆共1圈

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

资料有兼容说明