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

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

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

添加代码到style.css

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

修改后效果

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

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

修改后效果

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

MC百科 Wordpress WordPress为文章列表缩略图纯代码添加阴影/圆角/选中3D浮动效果 https://www.mcbke.com/wordpress-coure-sltyyxxxg.html

科技迷、外设控、Minecraft爱好者,科技改变生活!

常见问题

相关文章

评论
暂无评论
WordPress为文章列表缩略图纯代码添加阴影/圆角/选中3D浮动效果-海报

分享本文封面