1. 优化后的 CSS 代码
/* ========== Logo 扫光效果 ========== */
.navbar-brand {
position: relative;
overflow: hidden;
margin: 0;
}
.navbar-brand::before {
content: "";
position: absolute;
left: -685px;
top: -460px;
width: 240px;
height: 15px;
background-color: rgba(255, 255, 255, 0.5);
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-animation: searchLights 6s ease-in 0s infinite;
-o-animation: searchLights 6s ease-in 0s infinite;
animation: searchLights 6s ease-in 0s infinite;
}
@-moz-keyframes searchLights {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0;
}
}
@-webkit-keyframes searchLights {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0;
}
}
@-o-keyframes searchLights {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0;
}
}
@keyframes searchLights {
40% {
left: -100px;
top: 0;
}
60% {
left: 120px;
top: 100px;
}
80% {
left: -100px;
top: 0;
}
}
/* ========== 侧边栏「时间流逝」进度条 ========== */
.sidebar-count .content {
padding: 15px;
}
.sidebar-count .content .item {
margin-bottom: 15px;
}
.sidebar-count .content .item:last-child {
margin-bottom: 0;
}
.sidebar-count .content .item .title {
font-size: 12px;
color: var(--minor);
margin-bottom: 5px;
display: flex;
align-items: center;
}
.sidebar-count .content .item .title span {
color: var(--theme);
font-weight: 500;
font-size: 14px;
margin: 0 5px;
}
.sidebar-count .content .item .progress {
display: flex;
align-items: center;
}
.sidebar-count .content .item .progress .progress-bar {
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--classC);
width: 0;
min-width: 0;
flex: 1;
margin-right: 5px;
}
@keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: 30px 0;
}
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
width: 0;
height: 100%;
border-radius: 5px;
transition: width 0.35s;
-webkit-animation: progress 750ms linear infinite;
animation: progress 750ms linear infinite;
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
background: #bde6ff;
background-image: linear-gradient(
135deg,
#50bfff 25%,
transparent 25%,
transparent 50%,
#50bfff 50%,
#50bfff 75%,
transparent 75%,
transparent 100%
);
background-size: 30px 30px;
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
background: #ffd980;
background-image: linear-gradient(
135deg,
#f7ba2a 25%,
transparent 25%,
transparent 50%,
#f7ba2a 50%,
#f7ba2a 75%,
transparent 75%,
transparent 100%
);
background-size: 30px 30px;
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
background: #ffa9a9;
background-image: linear-gradient(
135deg,
#ff4949 25%,
transparent 25%,
transparent 50%,
#ff4949 50%,
#ff4949 75%,
transparent 75%,
transparent 100%
);
background-size: 30px 30px;
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
background: #67c23a;
background-image: linear-gradient(
135deg,
#4f9e28 25%,
transparent 25%,
transparent 50%,
#4f9e28 50%,
#4f9e28 75%,
transparent 75%,
transparent 100%
);
background-size: 30px 30px;
}
.sidebar-count .content .item .progress .progress-percentage {
color: var(--info);
}
/* ========== 标题居中 & 主容器阴影 ========== */
.app.container {
box-shadow: 0 0 30px rgba(73, 90, 47, 0.47);
}
header.bg-light.lter.wrapper-md {
text-align: center;
}
/* ========== 盒子四周、导航栏、面包屑、文章图片阴影 ========== */
.navbar {
box-shadow: 0 1px 10px rgba(73, 90, 47, 0.47);
}
.breadcrumb {
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
.breadcrumb:hover {
transform: translateY(-6px);
box-shadow: 0 6px 8px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img {
transition: all 0.3s;
box-shadow: 0 3px 5px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img:hover {
transform: translateY(-8px);
box-shadow: 0 6px 10px rgba(73, 90, 47, 0.47);
}
.preview {
box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
.blog_info .list-group {
transition: all 0.3s;
}
.blog_info .list-group:hover {
transform: translateY(-4px);
box-shadow: 0 4px 6px rgba(73, 90, 47, 0.47);
}
/* ========== 文章卡片 & 头图放大特效 ========== */
.blog-post .panel,
.blog-post .panel-small,
.blog-post .panel-picture {
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel:hover,
.blog-post .panel-small:hover,
.blog-post .panel-picture:hover {
transform: translateY(-8px);
box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.index-post-img,
.index-post-img-small,
.entry-thumbnail {
overflow: hidden;
}
.item-thumb,
.item-thumb-small {
transition: all 0.3s;
}
.item-thumb:hover,
.item-thumb-small:hover {
transform: scale(1.1);
}
.item-thumb .img_copyright {
transition: all 0.3s;
}
.item-thumb:hover .img_copyright {
transform: translateX(-24px);
}
.post-content img {
border-radius: 10px;
transition: 0.5s;
}
.post-content img:hover {
transform: scale(1.1);
}
/* ========== 底部页脚 GitHub 徽章 ========== */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.github-badge .bg-blue {
background-color: #007ec6;
}
.github-badge .bg-orange {
background-color: #ffa500;
}
.github-badge .bg-red {
background-color: #f00;
}
.github-badge .bg-green {
background-color: #3bca6e;
}
.github-badge .bg-purple {
background-color: #ab34e9;
}