网站的头像如何添加呼吸灯、旋转特效？

今天网站冲浪的时候，我看到了很多网站的个人头像居然在发光，鼠标移至上面还可以720度旋转。看起来还是比较好玩的，于是我把代码copy过来了。

只要在你的主题CSS里面加入以下类似的代码即可：

/*头像呼吸灯光环和鼠标悬停旋转*/
.avatar-img .avatar-id-1{
	border-radius: 50%; 
	animation: light 4s ease-in-out infinite;
	transition: 0.5s;
	height: 80px;
	width: 80px;
}
.avatar-img .avatar-id-1:hover{
   transform: scale(1.15) rotate(360deg);
}
@keyframes light{
	0%{
		box-shadow: 0 0 15px #f00;
	} 
	25%{
		box-shadow: 0 0 30px #0f0;
	} 
	50%{
		box-shadow: 0 0 15px #00f;
	} 
	75%{
		box-shadow: 0 0 30px #0f0;
	} 
	100%{
		box-shadow: 0 0 15px #f00;
	}
}

原作者：阿蛮君，有删改。