首页文章悬停上浮

.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

页内文章悬停放大

/*文章内图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

目录选中变色

.tocify .active, .vditor-outline__item--current, .vditor-outline__item:hover {
border-left-color: #ff1c1c;
    background: #ff6363;
    color: #fff;
}

登录、评论按钮渐变

.btn-gd-primary {
    color: #fff;
    border: none;
    background: rgb(255 255 255 / 15%) linear-gradient(45deg,#9bdcf0,#f05050);
    padding-top: 6px;
    padding-bottom: 6px;
    transition: all .2s ease;
}

页脚底部

/*底部页脚*/
.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
}

头像呼吸灯

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

评论和文章头像旋转

/*左侧文章图标和评论头像鼠标悬停旋转*/
.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}

右侧滚动条和有链页面滚动条

.navs-slider-bar{
background-color: #f05050;
}

.post_tab .nav-item.active .nav-link:before {
    left: 0;
    right: 0;
    border-bottom-color: #f05050;
}

博客信息标签颜色

.badge {
  background-color: #f05050;
}

修复红色主题下搜索框显示不清晰

.bg-danger .text-muted {
color: #98a6ad!important;
}
最后修改:2022 年 02 月 20 日
如果觉得我的文章对你有用,请随意赞赏