Hexo之头像旋转

头像持续旋转

参考:https://aqingya.cn/articl/471f028e.html

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl

首先定义动画：

@keyframes autoRotate {
	from{}
    to{
    transform: rotate(360deg);
    }
}

然后设置动画属性：

animation-name: 动画的名称
animation-duration: 动画的持续时间
animation-timing-function:动画的线性 linear
animation-iteration-count:动画的播放次数 infinate
animation-play-state: 动画的播放次数 running/paused

最后使用动画：

-webkit-animation-name: autoRotate;                /*动画名称*/
-webkit-animation-timing-function: linear;   /*动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；*/
-webkit-animation-iteration-count: infinite;      /*动画播放次数，infinite：一直播放*/
-webkit-animation-duration: 3.2s;                 /*动画完成时间*/

另外，添加鼠标经过时停止旋转效果：

.site-author-image:hover {
  /* 鼠标经过停止头像旋转 */
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}

头像触碰旋转

.site-author-image:hover {
  /* 鼠标经过时头像旋转 */
  transform: rotate(360deg);
}