
教程开始
下面代码放入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













![[子比主题美化教程] – 自定义背景文字介绍的样式代码-星辰解忧工作室](https://img2.imgtp.com/2024/04/22/rVxybMYv.png)





- 最新
- 最热
只看作者