网站头像添加呼吸光坏和旋转效果

首页 / ?网站教程 / 正文

前言

今天闲的无聊,看了看本博客的侧边栏美化程度,感觉很单调,突然就觉得头像应该美化一下,于是就写了一段代码来美化头像。

截图

请输入图片描述

教程

以下代码写在CSS里面即可,此代码中的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;}}
评论区
头像