鼠标移至头像CSS代码实现旋转效果的方法

我们是不是也有见过在访问有些博客网站的时候，鼠标移动到用户头像的时候看到头像会旋转？这个效果是如何实现的呢？其实很简单，我们只需要在CSS样式中加上样式即可实现，如果你也需要实现看下面的代码。

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

我们将CSS样式添加到当前主题的CSS控制中。