Pigeon主题部分美化

“好的主题值得被推荐”

[tip type="red"]注意本篇文章基于主题3.4.x版本写的，3.5版本作者已重构，部分代码的类名已变[/tip]
  作者大大说下个版本会大更，今天在群里发现有兄弟因为我上篇文章而买的主题，我觉得好的主题总是会让人倾心的，我现在用的版本是3.4.0最新版本是3.4.1由于是小更新，我也就没更，更重要的是因为我改的地方挺多的。下面的美化仅适用于喜欢主题但是没有前端基础的兄弟

首页加载更多及评论提交按钮的渐变效果

这个效果是我当时想改背景而意外发现的
（以下所提及的代码如果没有特别说明均直接复制粘贴到后台的自定义CSS中）

/* 加载更多渐变色滚动动画*/
@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.paging_ajax_btn >.next ,#comment-form .comment-buttons #submitComment {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.paging_ajax_btn >.next,#comment-form .comment-buttons #submitComment:before {
    background-color: rgba(0, 0, 0, 0);
    boder: none
}

footer

首页头像背景图放大以及头像的适配

作者大大说会在下个版本更新增加宽度自定义
以下代码适用于普通皮肤不适用杂志皮肤

#header .suggest .webname {
    font-size: 1.25rem;
    color: var(--white);
    margin-top: 8px;
}

#header .header_frame .p_avatar {
    float: left;
    width: 65px;
    height: 65px;
}

#header .suggest {
    margin-left: 80px;
#header .header_picture {
    height: 225px;
}
}

其他

上面是最最主要的两个，剩下的是首页文章列表的文章标题大小，这个数值是我自己用自己的微信QQ浏览器慢慢试出来的，之前是开启文章图片以后手机端感觉标题有些大于是自己调整了数值。

.index_list_name {
    font-size: 1.1rem;
}

杂志皮肤中的图片模糊是之前发文章设置头图以后文字和背景颜色重复，于是加了一个模糊来凸现文字，这个美化仅针对于杂志模式下

/*文章图片模糊*/
.postz_pic_img {
    filter: blur(4px);
}

最后

  主题会大更，相信会更好，有啥问题跟作者大大积极沟通，他很好说话的，然后就是这篇文章会在大更后删除，写他的原因也仅仅是给有需要的人，在本站的关于页面有联系方式，要是有啥需要帮助的直接联系我就好:@(献花)