Alist美化教程

0290

效果

白天

图片[1]-Alist美化教程-阿尔法欧欧

黑夜

图片[2]-Alist美化教程-阿尔法欧欧

操作步骤

后台设置自定义头部和内容css

图片[3]-Alist美化教程-阿尔法欧欧

自定义头部


<!--引入字体，全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
 

<style>
.hope-ui-light {
    --my-color: rgba(255,255,255,0.6);
    --color-main-custom: #ffffff;
}
.hope-ui-dark {
    --my-color: rgba(0,0,0,0.6);
    --color-main-custom: #000000;
}

/*主列表夜间模式透明，50%这数值是控制透明度大小的*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{
background-color:rgb(0 0 0 / 50%) !important;
}
/*readme夜间模式透明，50%这数值是控制透明度大小的*/
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{
background-color:rgb(0 0 0 / 50%) !important;
}
/*主列表透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px)!important;
 
}
/*readme透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px)!important;
}

/*顶部右上角切换按钮透明-白天*/
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px)!important;
}
/*顶部右上角切换按钮透明-黑夜*/
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(10px)!important;
}
/*右下角侧边栏按钮透明-白天*/
.hope-ui-light .hope-c-PJLV-ijgzmFG-css{
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px)!important;
}
/*右下角侧边栏按钮透明-黑夜*/
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css{
background-color: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(10px)!important;
}
 

/*白天模式代码块透明*/
.hope-ui-light pre{
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px)!important;
}
/*夜间模式代码块透明*/
.hope-ui-dark pre {
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px)!important;
}
 
/*白天模式 搜索主体+毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}
 
/*白天模式 搜索栏输入框+毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}
 
/*白天模式 搜索按钮+毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}
 
/*夜间模式搜索主体+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}
 
/*夜间模式搜索栏+毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}
 
/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
} 




  /** 鼠标样式 开始**/
/** 普通指针样式**/
body{cursor: url(/d/RobinPS/%E4%BA%91%E7%9B%98%E9%85%8D%E7%BD%AE/%E6%99%AE%E9%80%9A%E6%8C%87%E9%92%88.cur), default;}
/** 链接指针样式**/
a:hover{cursor:url(/d/RobinPS/%E4%BA%91%E7%9B%98%E9%85%8D%E7%BD%AE/%E9%93%BE%E6%8E%A5%E6%8C%87%E9%92%88.cur), pointer;}
/** 鼠标样式 结束**/

/* 背景 */
body {
    background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url(/d/RobinPS/%E4%BA%91%E7%9B%98%E9%85%8D%E7%BD%AE/%E5%A3%81%E7%BA%B8.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position-x: center !important;
}

.hope-c-PJLV-igScBhH-css,
.hope-c-PJLV-ikSuVsl-css {
    background-color: #ffffff9e !important;
    backdrop-filter: blur(10px);
}

.hope-c-PJLV-idaeksS-css,
.hope-c-PJLV-ikaMhsQ-css {
    background: none !important;
}

.footer {
    display: none !important;
}

        ::selection {
            background: #fbc2eb;
            color: #fff;
        }

        * {
            letter-spacing: 2px;
        }

        .hope-ui-dark .markdown-body a {
            color: #fff !important;
        }

        .copyright a,
        .copyright .by {
            text-decoration: none;
        }

        .copyright .by {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .copyright a {
            display: flex;
            justify-content: center;
            margin: 0 10px;
            position: relative;
            transition: .5s;
        }

        .copyright .xhx {
            background: pink;
            height: 3px;
            border-radius: 10px;
            width: 0;
            position: absolute;
            bottom: -3px;
            transition: .5s;
        }

        .copyright a:hover {
            color: pink;
        }

        .copyright a:hover .xhx {
            width: 100%;
        }

        .copyright .run_item {
            display: flex;
            align-items: center;
            margin: 10px;
        }

        .copyright .link {
            padding: 4px;
            background: rgba(255, 133, 153);
            border-radius: 0 8px 8px 0;
        }

        .copyright .name {
            padding: 4px;
            background: var(--color-main-custom);
            border-radius: 8px 0 0 8px;
        }

        .copyright {
            padding: 50px;
        }

        .runtime {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .about,
        .state {
            width: min(99%, 980px);
            text-align: center;
            padding-inline: 2%;
        }

        .state {
            margin-top: 20px;
        }
/*全局字体*/
*{font-family:LXGW WenKai}
*{font-weight:bold}
body {font-family: LXGW WenKai;}

</style>

自定义内容


<!--延迟加载-->

<div id="customize" style="display: none;">
    <div>
    <!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
        <br />
        <center class="dibu">
            <div style=" line-height: 20px;font-size: 12pt;font-weight: bold;">
                <span>
                    <span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto">
                        <a href="#" id="hitokoto_text">
                            人生最大的遗憾，就是在最无能为力的时候遇到一个想要保护一生的人
                        </a>
                    </span> 
                </span>
                <p style="color: rgb(13, 109, 252);margin-left: 10rem;font-size: 12pt;font-weight: bold;">
                    <small>
                        —— Robin's Cloud
                    </small>
                </p>
            </div>
 
            <div style="color: rgb(205, 155, 29);font-size: 18px; font-weight: bold;">
                <span class="nav-item">
                    <a class="nav-link" href="https://www.alphaoo.com/"
                        target="_blank">
                        <i class="fab fa-qq" style="color:#409EFF" aria-hidden="true">
                        </i>
                        博客 
                    </a>
                </span>
                <!--后台入口-->
                <span class="nav-item">
                    <a class="nav-link" href="/@manage" target="_blank">
                        <i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        管理 
                    </a>
                </span>
            </div>
        </center>
        <br />
        <br />
    </div>
 
 
 
    <!--一言API-->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>


<!-- 网页鼠标点击特效（爱心） -->
<script type="text/javascript">
    ! function (e, t, a) {
       function r() {
           for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                   e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
               "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
               .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
           requestAnimationFrame(r)
       }
       function n() {
           var t = "function" == typeof e.onclick && e.onclick;
           e.onclick = function (e) {
               t && t(), o(e)
           }
       }
 
       function o(e) {
           var a = t.createElement("div");
           a.className = "heart", s.push({
               el: a,
               x: e.clientX - 5,
               y: e.clientY - 5,
               scale: 1,
               alpha: 1,
               color: c()
           }), t.body.appendChild(a)
       }
 
       function i(e) {
           var a = t.createElement("style");
           a.type = "text/css";
           try {
               a.appendChild(t.createTextNode(e))
           } catch (t) {
               a.styleSheet.cssText = e
           }
           t.getElementsByTagName("head")[0].appendChild(a)
       }
 
       function c() {
           return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
               .random()) + ")"
       }
       var s = [];
       e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
           .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
               setTimeout(e, 1e3 / 60)
           }, i(
               ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
           ), n(), r()
   }(window, document);
</script>

其中图片资源换成自己的

© 版权声明
1、本网站名称和网址：阿尔法欧欧-AlphaOO（https://www.alphaoo.com）
2、文章版权归作者所有，未经允许请勿转载
3、本站资源定期维护，如发现链接失效，请与作者联系
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理
联系站长
Robin
隐私政策
PrivacyPolicy
用户协议
UseGenerator
许可协议
NC-SA 4.0
THE END
个人网盘服务器
# 个人网站# 个人网盘# Alist# 网盘
喜欢就支持一下吧
点赞0赞赏 分享
Robin的头像-阿尔法欧欧钻石会员
Ubuntu上安装WordPress-阿尔法欧欧
Ubuntu上安装WordPress
Ubuntu上安装WordPress
2025年2月20日 449
基于WordPress的子比主题美化-阿尔法欧欧
基于WordPress的子比主题美化
基于WordPress的子比主题美化
2025年3月20日 259
网站页面增加音乐模块-阿尔法欧欧
网站页面增加音乐模块
网站页面增加音乐模块
2025年3月27日 129
SVN创建仓库-阿尔法欧欧
SVN创建仓库
SVN创建仓库
2025年3月29日 38
Alist部署教程（Docker版）-阿尔法欧欧
Alist部署教程（Docker版）
Alist部署教程（Docker版）
2025年3月31日 29
网页侧边栏视频组件-阿尔法欧欧
网页侧边栏视频组件
网页侧边栏视频组件
2025年3月27日 22
相关推荐
Alist美化教程-阿尔法欧欧
Alist美化教程
Alist美化教程
2025年3月31日 29
Alist部署教程（Docker版）-阿尔法欧欧
Alist部署教程（Docker版）
Alist部署教程（Docker版）
2025年3月31日 29
SVN创建仓库-阿尔法欧欧
SVN创建仓库
SVN创建仓库
2025年3月29日 38
Cloudreve部署教程-阿尔法欧欧
Cloudreve部署教程
Cloudreve部署教程
2025年3月28日 14
SSH安全加固指南-阿尔法欧欧
SSH安全加固指南
SSH安全加固指南
2025年3月28日 21
VIP视频在线解析-阿尔法欧欧
VIP视频在线解析
VIP视频在线解析
2025年3月27日 11
评论 抢沙发

请登录后发表评论

    暂无评论内容

用户封面
Robin的头像-阿尔法欧欧钻石会员
Alist部署教程（Docker版）-阿尔法欧欧
Alist部署教程（Docker版）
Alist部署教程（Docker版）
2025年3月31日 29
SVN创建仓库-阿尔法欧欧
SVN创建仓库
SVN创建仓库
2025年3月29日 38
Cloudreve部署教程-阿尔法欧欧
Cloudreve部署教程
Cloudreve部署教程
2025年3月28日 14
SSH安全加固指南-阿尔法欧欧
SSH安全加固指南
SSH安全加固指南
2025年3月28日 21
VIP视频在线解析-阿尔法欧欧
VIP视频在线解析
VIP视频在线解析
2025年3月27日 11
网页侧边栏视频组件-阿尔法欧欧
网页侧边栏视频组件
网页侧边栏视频组件
2025年3月27日 22
Ubuntu上安装WordPress-阿尔法欧欧

1Ubuntu上安装WordPress

Robin的头像-阿尔法欧欧钻石会员2025年2月20日
449
基于WordPress的子比主题美化-阿尔法欧欧

2基于WordPress的子比主题美化

Robin的头像-阿尔法欧欧钻石会员2025年3月20日
259
半导体行业常用词汇-阿尔法欧欧

3半导体行业常用词汇

机智大王的头像-阿尔法欧欧2025年4月7日
208
网站页面增加音乐模块-阿尔法欧欧

4网站页面增加音乐模块

Robin的头像-阿尔法欧欧钻石会员2025年3月27日
￥19129
SVN创建仓库-阿尔法欧欧

5SVN创建仓库

Robin的头像-阿尔法欧欧钻石会员2025年3月29日
38
Alist部署教程（Docker版）-阿尔法欧欧

6Alist部署教程（Docker版）

Robin的头像-阿尔法欧欧钻石会员2025年3月31日
29
Alist美化教程-阿尔法欧欧

7Alist美化教程

Robin的头像-阿尔法欧欧钻石会员2025年3月31日
29
网页侧边栏视频组件-阿尔法欧欧

8网页侧边栏视频组件

Robin的头像-阿尔法欧欧钻石会员2025年3月27日
50022
12