在博客园中美化博客，并使用自定义的主题

chenzhang's Blog / 2023-08-24 / 原文

一、开通博客园 JS 权限

这部分不再赘述，可以点击下方链接，查看如何申请

博客园 JS 权限申请

二、在博客园中设置相关内容

打开你的博客首页 -> 管理 -> 设置
设置博客皮肤为 “Custom”
勾选禁用默认CSS样式

三、在博客园设置中粘贴相应代码

此部分代码粘贴到【页面定制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)}}

此部分代码粘贴到【页首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>