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;
	}
}
/* 侧边栏小工具个人信息模块头像增加呼吸光环及鼠标悬停旋转放大效果结束 */

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

本页面最后更新于:2022-09-19 14:16:31 ,如页内有链接失效,您可在下方留言,我会尽快处理。

版权声明:本站遵循CC BY-NC-SA 4.0版权协议,转载请附上原文地址、链接及本声明。
本文链接:美好的明天 - WordPress侧边栏个人信息头像增加呼吸光环及鼠标悬停旋转放大效果
THE END
分享
二维码
海报
WordPress侧边栏个人信息头像增加呼吸光环及鼠标悬停旋转放大效果
很多网站的评论者的头像都是圆形的有呼吸灯似的效果,并且当你的鼠标移上去的时候会旋转,那么这个怎么实现呢,我在网上找了很多,现在把我修改后的代码贴出来……
<<上一篇
下一篇>>