效果图

效果可以看博主的头像，评论区的头像也会自动加上呼吸灯，点击头像或电脑端停留在头像上面还会旋转

教程

<style>
    /*头像呼吸光环和鼠标悬停旋转放大*/
    .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;}
    }
</style>

将上面的代码放到网站的 <head> 或<body>里面保存即可查看效果了，建议放在<body>里面

THE END