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留下当作备用。

回复

共5条回复 我来回复
  • 古哥
    古哥
    欢迎访问关注本站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条评论
  • 古哥
    古哥
    欢迎访问关注本站TG官方频道:@iymark 官方邮箱账号:admin#iymark.com
    评论

    一段对文章排版有好处的css,可以打断英文单词以及链接等,使得文章强制对齐,不会出现一行内大段空白的情况。

    .entry p {
    word-break: break-all;
    }

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

    .navbar-header {
    overflow: hidden;
    position: relative;
    }
    .navbar-header:before {
    content: “”;
    position: absolute;
    left: -665px;
    top: -460px;
    width: 250px;
    height: 15px;
    background-color: rgba(255,255,255,.5);
    transform: rotate(
    -45deg
    );
    animation: searchLights 1s ease-in 1s infinite;
    }
    @keyframes searchLights{0%{left:-100px;top:0;}to{left:120px;top:100px;}}
    @media (max-width: 991px){
    @keyframes searchLights{0%{left:-100px;top:0;}to{left:-50px;top:50px;}}
    }

    知更鸟网站logo闪光css

    2021年03月08日 12:28 0条评论
本站APP
本站APP
分享本页
返回顶部