emlog评论区头像美化,CSS特效呼吸光环和旋转

最开始见到这个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刷新一下缓存，就可以查看效果了。

效果:

emlog评论区头像美化,CSS特效呼吸光环和旋转-五行资源分享网-第1张图片