WordPress侧边栏个人信息头像增加呼吸光环及鼠标悬停旋转放大效果

很多网站的评论者的头像都是圆形的有呼吸灯似的效果，并且当你的鼠标移上去的时候会旋转，那么这个怎么实现呢，我在网上找了很多，现在把我修改后的代码贴出来，大部分主题只要将下面的代码添加到 style.css 中即可，实际还需要按各自网站主题来进行部分修改。

效果演示

代码部署

以 CorePress-Pro 主题为例，打开 CorePress-Pro/static/css/main.css 文件，搜索 .widget-admin-author-avatar 元素，将以下代码贴入覆盖上传即可生效；

其他主题具体哪个位置请自行查看，如果不会操作也可在评论区留言。

搜索以下这段代码

.widget-admin-author-avatar {
	text-align: center;
	position: absolute;
	top: 70px;
	left: calc(50% - 75px / 2)
}
.widget-admin-author-avatar img {
	height: 74px;
	width: 74px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #fff
}

将其替换为如下代码

/* 侧边栏小工具个人信息模块头像增加呼吸光环及鼠标悬停旋转放大效果开始 */
.widget-admin-author-avatar {
	text-align:center;
	position:absolute;
	top:70px;
	left:calc(50% - 75px / 2);
	border-radius: 50%;
	animation: light 4s ease-in-out infinite;
	transition: 0.5s;
}
.widget-admin-author-avatar:hover {
	transform: scale(1.15) rotate(720deg);
}
.widget-admin-author-avatar img {
	height:74px;
	width:74px;
	border:3px solid #fff;
	border-radius:50%;
	background:#fff
}
@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;
	}
}
/* 侧边栏小工具个人信息模块头像增加呼吸光环及鼠标悬停旋转放大效果结束 */

至此完成，赶紧上传覆盖，刷新站点缓存看看效果吧