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