首页 > 其他分享 >博客园美化

博客园美化

时间:2023-06-24 16:13:23浏览次数:34  
标签:博客园 loader nth child wrap line true 美化

页面定制css代码

#loading{background:#000;background:radial-gradient(#222,#000);bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:99999}.loader-inner{bottom:0;height:60px;left:0;margin:auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap{animation:spin 2s cubic-bezier(0.175,0.885,0.32,1.275) infinite;box-sizing:border-box;height:50px;left:0;overflow:hidden;position:absolute;top:0;transform-origin:50% 100%;width:100px}.loader-line{border:4px solid transparent;border-radius:100%;box-sizing:border-box;height:100px;left:0;margin:0 auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap:nth-child(1){animation-delay:-50ms}.loader-line-wrap:nth-child(2){animation-delay:-0.1s}.loader-line-wrap:nth-child(3){animation-delay:-150ms}.loader-line-wrap:nth-child(4){animation-delay:-0.2s}.loader-line-wrap:nth-child(5){animation-delay:-250ms}.loader-line-wrap:nth-child(1) .loader-line{border-color:#ea4747;height:90px;width:90px;top:7px}.loader-line-wrap:nth-child(2) .loader-line{border-color:#eaea47;height:76px;width:76px;top:14px}.loader-line-wrap:nth-child(3) .loader-line{border-color:#47ea47;height:62px;width:62px;top:21px}.loader-line-wrap:nth-child(4) .loader-line{border-color:#47eaea;height:48px;width:48px;top:28px}.loader-line-wrap:nth-child(5) .loader-line{border-color:#4747ea;height:34px;width:34px;top:35px}@keyframes spin{0%,15%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.profile-menu {display: none !important;}#cnblogs_ch {display: none}
.left-side-wrapper ul li:not(:last-child) {
    margin-bottom: 6px !important;
}

页首html代码

<div id="loading">
    <div class="loader-inner">
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
        <div class="loader-line-wrap">
            <div class="loader-line"></div>
        </div>
    </div>
</div>

页脚html代码

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
  const opts = {
    theme: {
      name: 'geek',
      avatar:"https://pic.cnblogs.com/avatar/1845949/20230601110728.png",
    headerBackground:"https://images.cnblogs.com/cnblogs_com/jin-ting/1574375/t_230601091004_dropdown-header-bg.png"
    },

   highLight: {
      enable: true,
    },
    lineNumbers: {
      enable: true,
    },
    github: {
      enable: true,
      url: "",
    },
    gitee: {
      enable: true,
      url: '',
    },
    click: {
      enable: true,
    },
    emoji: {
      enable: true,
    },
    darkMode: {
      enable: true,
      autoDark: false,
      autoLight: false,
    },

    signature: {
      enable: true,
      contents: [
        "<b>为了能到远方,脚下的每一步都不能少.</b>",
        "Always keep a beginner's mind, don't forget the beginner's mind.",
        "<b>花开堪折直须折,莫待无花空折枝。</b>",
        "<b>一件事情不付诸实践,即使在心里想一万遍也是徒然。</b>",
        "<b>一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。</b>",
        "<b>

标签:博客园,loader,nth,child,wrap,line,true,美化
From: https://www.cnblogs.com/jin-ting/p/17501229.html

相关文章

  • Typora上传博客园解决方案
    最终效果右键本地的md文件,点击发送到中的bat脚本即可在当前目录下生成一个cnblog结尾的md文件,在这个文件中,图片地址已经转换,只需要将这个cnblog结尾的md文件中的内容复制到博客园进行发布即可实现过程首先找到SendTo文件夹,可通过下面的路径快速找到,复制即可%AppData%\Micros......
  • element 对话框标头样式美化
    /deep/.el-dialog__body{padding-top:27px;padding-left:42px;padding-right:38px;}/deep/.el-dialog{background:#F8FAFC;border-radius:12px;margin-top:7vh!important;}/deep/.el-dialog__header{position:relative;font-size......
  • 博客的简单美化
    在写博客之前,首先美化一下这个看起来非常普通的博客页面。在申请完博客之后,进入设置界面,首先博客皮肤选择“SimpleMemory”(因为本次改动均是基于此皮肤),然后申请js权限!具体如下图所示: 然后将从网上找的代码复制到博客侧边栏和页面定制CSS代码处,如图注意将个人信息修改为......
  • (三)元素的显示与隐藏、溢出与浮动、定位、美化与修饰
    一、元素的显示与隐藏 二、元素的溢出与浮动三、定位    四、浮动与定位总结 五、元素的美化与修饰  ......
  • 博客园主题美化
    参考文档https://www.yuque.com/awescnb使用的是reacg皮肤。美化教程后台配置:1.博客皮肤Custom,申请js权限。2.侧边栏公告<!--@format--><scriptsrc="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script><script>constopts={......
  • 博客园主题——atum3.0升级发布啦
    介绍这是一款基于VUE3.0打造的简约型博客主题,兼容各大主流浏览器,适配各个设备与分辨率,PC、平板、手机等均可正常浏览。并且采用响应式设计,提高使用响应速度。特性响应式设计,兼容平板、手机端浏览器。提供多种配置信息,方便各类用户进行个人定制化。部署文档十分详细且部署快......
  • 2023年的618,我决定入坑博客园
    从大学第一次从网上找技术贴起,便一直有一个写博客的想法,但苦于学业繁忙(打游戏时间都不够),且自己太菜(这才是真实原因),一直没能真正落地。大学毕业后,由于学习和工作需要时常翻起博客园里众多大佬的技术分享贴,收获满满,因此也想加入其中。即使难免会产出垃圾,或成为知识的搬运工。但......
  • 更改博客园的URL的请求邮箱
    博客设置https://i.cnblogs.com/[email protected] 修改用户名、昵称、手机、邮箱https://account.cnblogs.com/settings/account个人信息https://home.cnblogs.com/set/profile/......
  • 博客园 文字颜色/图片大小/图片居中
    图片居中设置:字体颜色:<fontsize=5>字体、字号和颜色</font><fontface="黑体">我是黑体字</font><fontface="微软雅黑">我是微软雅黑</font><fontface="STCAIYUN">我是华文彩云</font><fontcolor=#0099ffsize=7fac......
  • 博客园自定义样式修改标签页的icon图标
    步骤1:选择一张自己喜欢的图片,上传到https://www.logosc.cn/logo/favicon这个网站,将它转换成ico格式步骤2:进入博客园→文件界面,1.上传ico格式文件,2.点击这个文件步骤3:复制这一段url步骤4:进入博客园设置界面,将这段代码放入页眉<scripttype="text/javascript"language="jav......