效果

将鼠标放在图标展示效果

代码

<style>
/*头像呼吸光环和鼠标悬停旋转 开始 */
.img-full {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1);
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #22ACD6;
    }
    50% {
        box-shadow: 0 0 16px #22ACD6;
    }
    100% {
        box-shadow: 0 0 4px #22ACD6;
    }
}
/*头像呼吸光环和鼠标悬停旋转 结束 */
</style>