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留下当作备用。
分享一个本站正在用的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;
}
}效果如下图所示：
2021年02月17日 17:49 0条评论以下为一段自定义导航菜单特效的代码：
.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条评论.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条评论一段对文章排版有好处的css，可以打断英文单词以及链接等，使得文章强制对齐，不会出现一行内大段空白的情况。
.entry p {
word-break: break-all;
}2021年03月03日 20:18 0条评论.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条评论
