當看到小灰灰博客時
感到莫名的親切與喜愛
其主題源自知更鳥
分析喜歡的原因，有兩點
一是滾動時幻燈片式加載
二是背景圖清新可人
不好意思，背景圖我搞下來了
起初只是想要它半透明的頂欄
找到了博客園-護城河的文章
主題dux全站半透明效果
實現效果：網站顯示除背景圖片外，其余半透明效果，后臺沒有變化。
環境：.9.7、、lnmp1.5、主題dux
rgba(0,0,0,0.5)應為rgba(255,255,255,0.5)
我躍躍欲試，覺定在本地網站試水
(在電腦本地安裝網站)
備份文件：主題目錄/css/main.css
然后開始折騰，右鍵元素-檢查
找classjs自定義滾動條樣式js自定義滾動條樣式，改樣式，主要是背景色
background-color: rgba(255,255,255,0.5)/*0.5表示透明度為50%*/
不斷打磨樣式，最終效果：
個人感覺還行，這里說下細節
1、頂欄半透明及彩條
.header{background:rgba(255,255,255,0.78)url('https://www.jishusongshu.com/images/dytopbar.gif') repeat-x 0 100%;}
2、滾動條樣式
::-webkit-scrollbar {width: 8px;height: 8px;}::-webkit-scrollbar-track {background-color: rgba(73,177,245,.2);border-radius: 2em;}::-webkit-scrollbar-thumb {background-color: #49b1f5;background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);border-radius: 2em;}::-webkit-scrollbar-corner {background-color: transparent;}::-moz-selection {color: #fff;background-color: #49b1f5;}
代碼框也支持
3、網站鼠標指針
body{cursor:url(https://www.jishusongshu.com/wp-content/uploads/2020/02/normal3.png), default;}a:hover{cursor:url(https://www.jishusongshu.com/wp-content/uploads/2020/02/link3.png), pointer;}
更多指針：
4、網頁加載動畫
使用一個插件：WP Smart
選擇自定義動畫，填入自定義的html和css
這里推薦一個可免費下載的素材網站
掃碼二維碼
注冊即送600積分
素材圈
為使加載動畫呈半透明
我們修改插件樣式文件
wp-smart-//css/wsp-front-.css
.smart-page-loader?{...????background:?rgba(0,0,0,0.5);...}
為使在夜間模式仍半透明狀
我們選擇忽略夜間模式適配
wp-smart-//js/wsp-main-.js
class="smart-page-loader wp-dark-mode-ignore">div>
—End—