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

 

今天网站冲浪的时候,我看到了很多网站的个人头像居然在发光,鼠标移至上面还可以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;
	}
}

提示:

1. 建议将上述代码放到子主题的“style.css”中。

2. 其中“.avatar-img .avatar-id-1”这串代码表示你头像的类名,需要自行更改(浏览器的调试模式可以查看)。

 


原作者:阿蛮君,有删改。

THE END
点赞2
评论区 抢沙发

请登录后发表评论

    暂无评论内容