给头像呼添加吸光环和鼠标悬停加速旋转

前言

　　最开始见到这个css特效感觉还是挺有趣的，头像呼吸光环哈，还有鼠标悬停会进行旋转，并且能感距到明显的加速。

使用方法

　　通过浏览器的审查元素功能，找到头像的html元素。

　　若头像元素为avatar，就可以在css中添加

头像呼吸光环css

/*头像呼吸光环*/
.avatar  {
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
@keyframes light {
0%{box-shadow: 0 0 4px #f00;}
25%{box-shadow: 0 0 16px #0f0;} 
50%{box-shadow: 0 0 4px #00f;}
75%{box-shadow: 0 0 16px #0f0;} 
100%{box-shadow: 0 0 4px #f00;}
}

悬停头像旋转css

/*悬停头像旋转*/
.avatar:hover {
transform: rotate(666turn);
transition-delay: 1s;
transition-property: all;
transition-duration: 59s;
transition-timing-function: cubic-bezier(.34,0,.84,1);
}