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

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

66字 1分钟 2025-04-14 站长 84 0 该作者已发布460篇文章

pencil and a dream can take you anywhere.

拿起笔，写下你的梦想，你的人生就从此刻起航

教程开始

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

ENLIGHTERJS_CODEBLOCK_0

下面代码添加到自定义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%;}
;}
.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%;}
;}
.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%;}
;}