部落格園-awescnb外掛-geek皮膚最佳化-目錄最佳化

丿似锦發表於2024-09-01

💖簡介

部落格園-awescnb外掛-geek皮膚下，文章內容目錄顯示最佳化：滑鼠移入顯示、目錄展開/收起圖示。

⭐最佳化

🌟滑鼠移入顯示

  • 定義自定義CSS
    部落格園->管理->設定->頁面定製 CSS 程式碼
    新增程式碼
#catalog ul li a:hover {background: rgba(80, 80, 80, .04);color: #807dd4;}

滑鼠移入展示不同背景

🌟展開/收起圖示

  • 定義自定義CSS
    部落格園->管理->設定->頁面定製 CSS 程式碼
    新增程式碼
h3.catalog-title:before {content: '📖';position: relative;display: block;right: 10px;}
h3.catalog-title:after {font-weight: 900;transform: rotate(90deg);content: "\25B2";font-variant: normal;text-rendering: auto;display: flex;background: 0 0;position: absolute;top: 0;bottom: 0;right: 15px;justify-content: center;align-items: center;transition: transform .2s ease, -webkit-transform .3s ease;font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;}
h3.catalog-title.is-active:after{transform: rotate(180deg);}

為目錄前增加圖示
目錄展開/收起增加圖示及切換動畫

結束

相關文章