前言



  最开始见到这个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);
}



 可以一同加入使用，确认头像元素正确的话，Ctrl+F5刷新一下缓存，就可以查看效果了。