轻风记 风记得一朵花的香.
人类原创辽ICP备2022008387号-2

Surpport By 又拍云 × DogYun

自豪地使用 Typecho 建站搭配使用 🌻Sunny 主题当前在线 1 人
歌曲封面 未知作品
  • 歌曲封面谁 (Live版)廖俊涛

人类原创

辽ICP备2022008387号-2

Surpport By 又拍云 × DogYun

网站已运行 5 年 176 天 3 小时 9 分

Powered by Typecho & Sunny

2 online · 64 ms

Title

Pigeon主题部分美化

Meteor

·

Article
⚠️ 本文最后更新于2021年11月04日,已经过了963天没有更新,若内容或图片失效,请留言反馈

“好的主题值得被推荐”

注意本篇文章基于主题3.4.x版本写的,3.5版本作者已重构,部分代码的类名已变

  作者大大说下个版本会大更,今天在群里发现有兄弟因为我上篇文章而买的主题,我觉得好的主题总是会让人倾心的,我现在用的版本是3.4.0最新版本是3.4.1由于是小更新,我也就没更,更重要的是因为我改的地方挺多的。下面的美化仅适用于喜欢主题但是没有前端基础的兄弟

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

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

♾️ text 代码:
/* 加载更多渐变色滚动动画*/
@-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

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

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

♾️ text 代码:
#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浏览器慢慢试出来的,之前是开启文章图片以后手机端感觉标题有些大于是自己调整了数值。

♾️ text 代码:

.index_list_name {
    font-size: 1.1rem;
}

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

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

最后

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

现在已有 15 条评论,0 人点赞
Comment
发表
  1. 头像
    @
    所得是类
    · QQ浏览器

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
      1. 头像
        @
        太阳国语言
        · Chromium

        👍

        💖

        💯

        💦

        😄

        🪙

        👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  2. 头像
    @
    苏木
    感觉字体好好看 什么字体?
    另外那个渐变好像直接复制过去没有用
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      教程适用于3.4版本哈,新版本对应的类名已经变了,字体是思源宋体
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  3. 头像
    @
    博客最下面的那句句话怎麽添加的呀?
    头像改大后右边的名字和站点描述位置观感不好看了,怎么更改?
    头像下方和导航栏之间的渐变怎么去掉。让他们之间近一点
    导航栏下面的那条横杠怎么去掉。。。
    大佬。:&(蛆音娘_偷看)
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      都是右键审查css能解决的问题
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  4. 头像
    @
    博客最下面的那句話怎麼添加的呀?
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      头像改大后右边的名字和站点描述位置观感不好看了怎么更改?
      头像下方和导航栏之间的渐变怎么去掉。。。
      导航栏的那条横杠怎么去掉。。。大佬:&(蛆音娘_偷看)
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  5. 头像
    @
    暮云收尽溢清寒,银汉无声转玉盘,
    此生此夜不长好,明月明年何处看。
    中秋节快乐!
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  6. 头像
    @
    划重点(他很好说话的) = 有优惠 = 售后非常好 = 回复积极 = 修复bug积极 23333
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      确实很好:@(赞一个)
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  7. 头像
    @
    [secret]  不科学啊,滚动条都没有:&(蛆音娘_哭泣)[/secret]
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
    1. 头像
      @
      滚动条的宽度被我改成0了:&(蛆音娘_吃瓜)
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
  8. 头像
    @
    这个好啊,先收藏一下先:&(蛆音娘_滑稽)
    · QQ浏览器

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 0 💖 0 💯 0 💦 0 😄 0 🪙 0
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主 什么时候能静下来写点东西呢😩 2024.6.13 不再显示
博主