掘金头像旋转动画

掘金头像旋转动画


参考文章或者地址

文章

掘金头像地址

模仿地址

代码实现

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

资料有兼容说明

打赏测试
显示 Gitment 评论