解决方案来自多方,如侵权请联系我
个人建议:博客最主要的还是文章内容质量,过度美化将会增加很多很多动/静态资源导致页面加载变慢,服务器资源占用过高,极度影响访问者体验(但我就是喜欢)
首页卡片布局
效果描述
代码
/*卡片样式*/
/*大于1024宽度才会生效*/
@media (min-width: 1024px) {
.post-date {
background-color: #3cdc82 !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: red;
}
.post-meta span:nth-child(2) {
background-color: #66ccff;
}
.post-meta span:nth-child(3) {
background-color: orange;
}
.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: 10px;
text-align: center;
}
.post-list-thumb .post-title h3 {
text-align: center;
}
.float-content p {
margin-top: 5px;
}
.post-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.post-list-thumb::after {
content: "\00a0";
width: 4px;
height: 0px;
position: absolute;
left: 0px;
top: 0px;
background-color: #dda0dd;
box-shadow: #FFC0CB 0px 0px 6px;
border-radius: 10px;
transition: all 0.5s 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;
}
}
.post-bottom {
display: none;
}
标题上浮加载&下划线
效果描述
代码
/*标题横线动画*/
.single-center header.single-header .toppic-line {
position: relative;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #fff;
animation: lineWidth 2.5s;
animation-fill-mode: forwards;
}
@keyframes lineWidth {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/*标题动画*/
.entry-title {
-moz-animation: fadeInUp 2s;
-webkit-animation: fadeInUp 2s;
animation: fadeInUp 2s;
}
@-moz-keyframes fadeInUp {
0% {
-moz-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
50% {
-moz-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
100% {
-moz-transform: translateY(0%);
transform: translateY(0%);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
0% {
-webkit-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
50% {
-webkit-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1
}
}
@keyframes fadeInUp {
0% {
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
50% {
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
100% {
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1
}
}
文字黑幕
效果描述
你知道的太多了
代码
/* 黑幕代码 */
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited {
color: #252525
}
.heimu,
.heimu a,
a .heimu,
.heimu a.new {
background-color: #252525;
color: #252525;
text-shadow: none
}
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off {
transition: color .13s linear;
color: #fff
}
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off {
transition: color .13s linear;
color: #add8e6
}
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off {
transition: color .13s linear;
color: #ba0000
}
Comments | 1 条评论
博客作者 作业已完城
我能再打一万个字烟花吗TQLTQLTQLTQLTQLTQL%%%%%%%%%%