Handsome主题美化笔记

/* logo扫光 开始 */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0px 0 0 0px;
}

.navbar-brand:before {
    content: "";
    position: absolute;
    left: -685px;
    top: -460px;
    width: 240px;
    height: 15px;
    background-color: rgba(255, 255, 255, .5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    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: 0px;
    }
}

@-webkit-keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}

@-o-keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}

@keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}
/* logo扫光 结束 */
/* 时间流逝 */
.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(255, 112, 173, 0.35);
}
header.bg-light.lter.wrapper-md { 
	  text-align: center; 
}

/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整 开始*/
.app.container {
    box-shadow: 0 0 30px rgba(73, 90, 47, 0.47);
}
.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 {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.index-post-img {
    overflow: hidden;
}
.index-post-img-small {
    overflow: hidden;
}
.item-thumb {
    transition: all 0.3s;
}
.item-thumb:hover {
    transform: scale(1.1)
}
.item-thumb-small {
    transition: all 0.3s;
}
.item-thumb-small:hover {
    transform: scale(1.1)
}
.item-thumb .img_copyright{
    transition: all 0.3s;
}
.item-thumb:hover .img_copyright{
    transform: translateX(-24px);
}
.entry-thumbnail {
    overflow: hidden;
}
.post-content img {
    border-radius: 10px;
    transition: 0.5s;
}
.post-content img:hover {
    transform: scale(1.1);
}
/*文章阴影及头图放大特效，修正放大后头图的版权位置 结束*/
    /*底部页脚*/
.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
}