发布作者： vkjia
百度收录： 正在检测是否收录...
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
Typecho博客Joe主题的头像呼吸灯
2025年08月13日 12阅读 0评论 0点赞
效果图
效果可以看博主的头像，评论区的头像也会自动加上呼吸灯，点击头像或电脑端停留在头像上面还会旋转
教程
<style>
/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar {
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.avatar:hover {
transform: scale(1.15) rotate(720deg);
}
@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;}
}
</style>将上面的代码放到网站的 <head> 或<body>里面保存即可查看效果了，建议放在<body>里面$[泡泡表情]::(坤坤)
—— 评论区 ——