引言 本文主要是根據我自己的博客裝扮介紹，需要自定義樣式必須申請js權限，具體不贅述（為了更好的視覺效果，可以把主題自帶的模板背景色清理掉）。下面是效果圖
版權：https://www.cnblogs.com/qingdaye/p/12055209.html
一：背景圖
背景圖就很簡單啦，直接css代碼配置就行。（其他組件或者樣式可在選擇喜歡的主題后自己調試修改樣式，然后添加到“頁面定制css代碼中”）
頁面定制 CSS 代碼
body{ background-image:url("https://w.wallhaven.cc/full/83/wallhaven-83dgj2.png") ; background-repeat: no-repeat; background-size:100% 100%; background-attachment:fixed; }
二：看板娘
看板娘文件下載：
鏈接：https://pan.baidu.com/s/1xDn1zpBCg45aKMSm9iKSAA
提取碼：ob58
下載完文件后解壓上傳到博客園的文件中（如下圖）：
然后復制以下代碼博客側邊欄公告（支持HTML代碼） （支持 JS 代碼：需要申請，申請內容百度就行） 框內。替換“你的博客名字”（例如：qingdaye ）
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/你的博客名字/waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="https://blog-static.cnblogs.com/files/你的博客名字/live2d.min.js"></script> <script src="https://blog-static.cnblogs.com/files/你的博客名字/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/你的博客名字/flat-ui.min.css"/>
三：Github
頁首 HTML 代碼（其他鏈接也可以這樣操作）
<a class="git-link" href="github地址"></a>
頁面定制 CSS 代碼（具體效果自己調整）
/*github*/ .git-link { z-index: 100; position: fixed; top: 0; left: 0; border: 0; height: 149px; width: 149px; transform: rotate(90deg); -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); -ms-transform: rotate(1deg); background-image: url(//images2015.cnblogs.com/blog/459873/201603/459873-20160317090540131-1089895320.png); }
四：鼠標點擊特效
復制到：頁首 HTML 代碼
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>
五：標題等字體特效
標題彩虹字滾動以及介紹顏色變化復制到：頁面定制 CSS 代碼
/*標題彩虹滾動字*/ #blogTitle h1 a{ background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); color: transparent;-webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: maskedAnimation 2s infinite linear; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip: text }
/*文字顏色變化*/ @keyframes maskedAnimation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } /*文字顏色變化*/ @keyframes change { 0% {color: DeepPink;} 25% {color: DeepSkyBlue;} 50% {color: Gold;} 75% {color: MediumAquamarine;} 100% {color: BlueViolet;} }