探索网络资源宝藏,畅享出行优惠与 AI 魅力,开启无忧数字生活
探索网络资源宝藏,畅享出行优惠与 AI 魅力,开启无忧数字生活
探索网络资源宝藏,畅享出行优惠与 AI 魅力,开启无忧数字生活
探索网络资源宝藏,畅享出行优惠与 AI 魅力,开启无忧数字生活
探索网络资源宝藏,畅享出行优惠与 AI 魅力,开启无忧数字生活

子比主题优化:为文章列表增添移入上浮效果及蓝色边框扫动特效

QQ_1744625711286

教程开始

下面代码放入WordPress后台-zibll主题设置-全局-自定义JavaScript代码

document.addEventListener('DOMContentLoaded', function () {
    const postsElements = document.querySelectorAll('posts.posts-item');
    postsElements.forEach((element) => {
        if (element.classList.contains('posts-item')) {
            element.classList.add('alone');
        }
    });
});

 

下面代码添加到自定义css即可

.posts-item.alone {position:relative;overflow:hidden;transition:all .3s ease;}
.posts-item.alone:hover {position:relative;z-index:1;transform:translateY(-2px);box-shadow:0 2px 5px rgba(0,0,0,.2),0 0 0 2px #007bff,0 0 8px rgba(0,123,255,.5);}
.posts-item.alone:hover:before,.posts-item.alone:hover:after {content:"";position:absolute;z-index:-1;top:0;bottom:0;width:30%;background:linear-gradient(to right,rgb(186 201 217/50%),rgba(0,0,0,0));}
.posts-item.alone:hover:before {left:-30%;transform:skewX(-30deg);animation:scanLeft 2s linear infinite;}
.posts-item.alone:hover:after {right:-30%;transform:skewX(30deg);animation:scanRight 2s linear infinite;}
@keyframes scanLeft {0% {left:-30%;}
100% {left:100%;}
;}
@keyframes scanRight {0% {right:-30%;}
100% {right:100%;}
;}

 

 

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 共17条

请登录后发表评论

    • 头像无敌咸鱼0
    • 头像隔壁考拉0
    • 头像赵考拉0
    • 头像快乐静0
    • 头像悲伤考拉0
    • 头像无敌大叔0
    • 头像郑敏0
    • 头像隔壁少年0
    • 头像钱静0
    • 头像快乐伟0
    • 头像李娜0
    • 头像无敌考拉0
    • 头像无敌大叔0
    • 头像吴小伙0
    • 头像王少年0
    • 头像李娜0
    • 头像李大叔0