WordPress 主题美化 – 头像添加呼吸光环以及旋转和放大

共计 694 个字符，预计需要花费 2 分钟才能阅读完成。

鼠标悬停时头像旋转和放大的 css 代码如下：

/*头像呼吸光环和鼠标悬停旋转放大开始*/
.widget-admin-author-avatar img {
    border-radius: 50%; 
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
    height: 65px;
    width: 65px;
}

.widget-admin-author-avatar img: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;
    }
}

如果想让鼠标悬停时评论的小工具的头像旋转，添加如下 css 代码：

/** 评论头像旋转 */
.widger-avatar img {
    border-radius: 50%; 
    transition: 1s;
}

.widger-avatar img: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;
    }
}

提醒：本文发布于601天前，文中所关联的信息可能已发生改变，请知悉！