WordPress为文章列表缩略图纯代码添加阴影/圆角/选中3D浮动效果

无意间搜索wordpress美化教程看到这个,觉得还是蛮不错的,比较之前扁平矩形的缩略图看起来效果提升了不少,分享下美化教程,喜欢的可以参考一下。

首先是为文章列表页的缩略图添加圆角和阴影效果:

添加代码到style.css

.thumbnail {
    border-radius: 6px;
    box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
}

修改后效果

图片[1]-WordPress为文章列表缩略图纯代码添加阴影/圆角/选中3D浮动效果-MC百科

wordpress文章列表页添加鼠标悬停选中时浮动3D效果:

添加代码到style.css

.entry-more a {
    opacity:0
}
.post:hover .entry-more a {
    rightright:0;
    opacity:1;
}
.post {
    transition:all 0.3s ease 0s;
}
.post:hover {
    transform:translateY(-3px);
    z-index:1;
    -webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;
}

修改后效果

图片[2]-WordPress为文章列表缩略图纯代码添加阴影/圆角/选中3D浮动效果-MC百科

温馨提示:本文最后更新于2021-08-24 10:29:42,某些文章具有时效性,若有错误或已失效,请在下方留言或联系MC百科网
© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
MC百科的头像-MC百科

昵称

取消
昵称表情代码图片