本文最后更新于 845 天前，其中的信息可能已经有所发展或是发生改变。
0x01 越转越快
CSDN学来的[1]
把鼠标放到头像上看效果
/**头像属性**/
#avatar{
border-radius: 50%;
width: 200px;
height: 200px;
margin: auto;
background-position: center;
background-size: cover;
}
/**旋转头像**/
#avatar:hover {
transform: rotate(100turn);
transition-delay: 0s;
transition-property: all;
transition-duration: 60s;
transition-timing-function: cubic-bezier(.34,0,.84,1);
}头像属性就不解释了
其中 cubic-bezier() 是生成贝塞尔速度曲线的函数
transform: rotate(100turn); 定义transform旋转圈数
transition-delay: 0s; 定义延迟开始的时间
transition-property: all; 指定具有过渡效果的css属性
transition-duration: 60s; 定义持续时间
transition-timing-function: cubic-bezier(.34,0,.84,1); 定义执行速度
0x02 转一圈后回弹
/**头像属性**/
#avatar2{
border-radius: 50%;
width: 200px;
height: 200px;
margin: auto;
background-position: center;
background-size: cover;
transform: rotate(-360deg);
transition: all 0.5s;
}
/**旋转头像**/
#avatar2:hover {
transform: rotate(360deg);
transition: all 0.5s;
}其实就是把 transform: rotate(360deg); 的参数改成了度数，以及在avatar加一个初始transform
