效果:
颜色可以自行修改,哪里是颜色很明显的
代码:
/*大于1024宽度才会生效*/
@media (min-width: 1024px){
.post-date {
background-color: #ff8000 !important;
padding: 2px 7px;
border-radius: 10px;
color: #ffffff !important;
width: max-content;
font-size: 10px !important;
margin-top: 5%;
}
.icon-time::before {
content: "e689";
color: #ffffff !important;
font-size: 10px;
}
.post-meta {
color: #ffffff !important;
font-size: 10px;
text-align: center;
}
.post-meta span {
padding: 3px 6px 3px 6px;
border-radius: 7px;
}
.post-meta span:nth-child(1) {
background-color: #3cdc82;
}
.post-meta span:nth-child(2) {
background-color: #fed466;
}
.post-meta span:nth-child(3) {
background-color: #ff4e6a;
}
.icon-attention::before {
content: "e693";
font-size: 10px;
color: #ffffff !important;
}
.icon-mark::before {
content: "e6ab";
font-size: 10px;
color: #ffffff !important;
}
.icon-file::before {
content: "e6ad";
font-size: 10px;
color: #ffffff !important;
}
.post-meta span a {
color: #ffffff !important;
}
.icon-caidan::before {
color: #FFC0CB !important;
}
.float-content {
font-size: 14px;
margin-top: 20px;
text-align: center;
}
.post-list-thumb .post-title h3 {
text-align: center;
}
.float-content p {
margin-top: 25px;
}
.post-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.post-list-thumb::after {
content: " ";
width: 4px;
height: 0px;
position: absolute;
left: 0px;
top: 0px;
background-color: #FFC0CB;
box-shadow: #FFC0CB 0px 0px 6px;
border-radius: 10px;
transition: all 0.8s ease 0s;
}
.post-list-thumb-left::after {
right: 0;
left: auto;
}
.post-list-thumb:hover:after {
height: 100%;
}
.post-thumb a img {
width: 400px !important;
height: 250px !important;
box-shadow: 1px 1px 30px 2px rgba(216,191,216,.3);
border-radius: 20px;
border: 1px solid #eee;
transition: all 1s !important;
}
.post-list-thumb:hover {
box-shadow: 0 1px 12px -6px rgba(0,0,0,.5);
}
.post-list-thumb:hover img {
transform: scale(1.05);
}
.post-thumb a {
overflow: inherit !important;
top: 25px;
}
.post-thumb {
width: 45%;
transform: translateX(70px);
}
.post-list-thumb-left .post-thumb {
float: left;
transform: translateX(-40px);
}
.post-content-wrap {
transform: translateX(-30px) translateY(16px);
padding-right: 0px !important;
}
.post-list-thumb-left .post-content-wrap {
transform: translateX(30px) translateY(16px);
padding-left: 0px !important;
}
}
如果你使用的是同源主题,可以在主题特殊设置里面直接加
也可以去WP自带的主题编辑改
也可以去style.css改(不推荐)
Comments NOTHING