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

256次阅读
没有评论

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

提醒:本文发布于459天前,文中所关联的信息可能已发生改变,请知悉!

AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年
正文完
 
阿蛮君
版权声明:本站原创文章,由 阿蛮君 2023-04-19发表,共计694字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
Copyright © 2022-2024 阿蛮君博客 湘ICP备2023001393号
本网站由 亿信互联 提供云计算服务 | 蓝易云CDN 提供安全防护和加速服务
Powered by Wordpress  Theme by Puock