WordPress主题一些好看的CSS样式

古哥 分类:交流

以下代码是我之前首页文章列表用卡片模式时,当鼠标滑过卡片,自动隐藏图片背景并显示特定背景色,标题自动隐藏,鼠标滑过自动显示标题。

.main-list-card .item:hover .item-img {
-webkit-filter: brightness(80%);
filter: brightness(80%);
background: var(--theme-color)!important;
}
.main-list-card .item:hover .item-title {
transform: scale(1);
transition: all .3s ease 0s;
-webkit-transform: scale(1);
-webkit-transition: all .3s ease 0s;
}
.main-list-card .post-loop-card .item-title {
bottom: 40%!important;
}

由于,我后来又换成了默认的缩略图加文章描述的列表排版,所以以上CSS留下当作备用。

回复

共3条回复 我来回复
  • 古哥
    古哥
    欢迎访问关注本站TG官方频道:@iymark 官方邮箱账号:admin#iymark.com
    评论

    分享一个本站正在用的Wordpress鼠标滑过菜单,菜单随之变化的样式:

    @media (min-width: 991px) {
    .primary-menu>ul>.menu-item>a:hover {
    color: #fff!important;
    height: 64px;
    border-bottom: 64px solid var(--theme-color);
    transition-duration: 0.3s;
    }
    }

    效果如下图所示:

    2021021709495119

    2021年02月17日 17:49 0条评论
  • 古哥
    古哥
    欢迎访问关注本站TG官方频道:@iymark 官方邮箱账号:admin#iymark.com
    评论

    以下为一段自定义导航菜单特效的代码:

    .menu-item.hot:after {
    background-color: red;
    color: rgb(255, 255, 255);
    content: "热";
    font-size: 10px;
    line-height: 1;
    position: absolute;
    right: -1px;
    top: 12px;
    border-radius: 3px;
    padding: 1px 3px;

    详情,可以参考设置教程:https://iymark.com/website/wordpress-diy-menu.html

    2021年02月18日 21:56 0条评论
  • 古哥
    古哥
    欢迎访问关注本站TG官方频道:@iymark 官方邮箱账号:admin#iymark.com
    评论

    .post-loop-list .item {
    padding: 15px 0 5px 18px;
    }
    .el-boxed .sec-panel-body {
    padding: 10px 20px;
    }
    .sec-panel-head h3 span a:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    content: "";
    background-color: var(--theme-color);
    background-image: -o-linear-gradient(top,rgba(255,255,255,.15),transparent);
    background-image: linear-gradient(180deg,rgba(255,255,255,.15),transparent);
    border-radius: 3px;
    }
    .sec-panel-head h3 span a {
    padding: 0 0 0 12px;
    }
    #modules-27 .row {
    background: #fff;
    }
    .sec-panel-body li:hover:before {
    border-left-color: var(--theme-color);
    transition-duration: .3s;
    border-width: 10px;
    top: 21px;
    }

    .sec-panel-body li a:hover {
    padding-left: 5px;
    transition-duration: .3s;
    }

    以上为首页分类列表文章排版美化CSS

    2021年02月23日 22:52 0条评论
本站APP
本站APP
京东好物
分享本页
返回顶部
如果觉得文章对你有帮助,请在文末点赞支持本站