首页 > 文章资讯 > 技术教程 > emlog教程 > 给网站设置头像呼吸光环和鼠标悬停旋转放大

给网站设置头像呼吸光环和鼠标悬停旋转放大

时间：2022年07月29日

来源：网络

编辑：佚名

把下面代码添加到公共CSS文件，然后把css标签改一下即可！
/*头像呼吸光环和鼠标悬停旋转放大开始*/
.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;}}
/*头像呼吸光环和鼠标悬停旋转放大结束*/
效果图如下：

新闻资讯更多

猜你需要