子比-头像呼吸光环和鼠标悬停旋转放大

前言

我们经常逛别人的网站，有些网站的美化效果特别好看，那么我们如何实现呢？其实很简单，只需一句代码即可实现。请看下面的教程。

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;}}