halo-theme-hao/templates/modules/header/index-img.html

<th:block th:if="${theme.config.top.above.enable_above}">
    <div class="pl-container">
        <th:block th:if="!${theme.config.top.above.enable_above_video}">
            <div class="pl-img pl-blur pl-visible"></div>
            <div class="pl-img pl-visible"></div>
            <video class="video"></video>
        </th:block>
        <th:block th:if="${theme.config.top.above.enable_above_video}">
            <video class="index-video" id="index-video" autoplay=""
                   th:src="${theme.config.top.above.index_video}" loop="" muted="" playsinline=""
                   webkit-playsinline=""
                   style="display:block;object-fit:cover;width:100%;height:100%;pointer-events:none;">
            </video>
        </th:block>
    </div>

    <div id="site-info">
        <h1 id="site-title">[[${site.title}]]</h1>
        <div id="site-subtitle">
            <span id="subtitle"></span>
            <span class="typed-cursor" aria-hidden="true"></span>
        </div>
    </div>
    <div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>

    <link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css' + theme_version}">

    <style>
        #site-title {
            width: max-content;
            max-width: 100%;
            position: relative;
            color: rgba(255, 255, 255, 0);
            animation: 1.5s linear 1s 1 normal both running show;
            margin: 0px auto !important;
        }

        #site-title::after {
            content: "";
            position: absolute;
            left: 0px;
            margin: auto;
            border-radius: 12px;
            top: 11px;
            height: 55px;
            width: 110%;
            animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
        }

        @media screen and (max-width: 768px) {
            #site-title::after {
                background: rgb(255, 255, 255) !important;
            }
        }

        @media screen and (max-width: 768px) {
            #site-subtitle::after {
                background: rgb(255, 255, 255) !important;
            }
        }

        #site-subtitle {
            width: 100%;
            max-width: 100%;
            position: relative;
            animation: 1.5s linear 1s 1 normal both running show;
            margin: 0px auto !important;
        }

        #site-subtitle::after {
            content: "";
            position: absolute;
            left: 0px;
            right: 0px;
            margin: auto;
            border-radius: 12px;
            height: 100%;
            width: 0%;
            animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
        }

        @keyframes color_change {
            0% {
                background: rgb(255, 255, 255);
            }

            100% {
                background: var(--xlfd-main);
            }
        }

        @-webkit-keyframes color_change {
            0% {
                background: rgb(255, 255, 255);
            }

            100% {
                background: var(--xlfd-main);
            }
        }

        @-webkit-keyframes swipe_box {
            0% {
                left: 0px;
                width: 0%;
            }

            50% {
                left: 0px;
                width: 100%;
            }

            100% {
                left: 100%;
                width: 0%;
            }
        }

        @keyframes swipe_box {
            0% {
                left: 0px;
                width: 0%;
            }

            50% {
                left: 0px;
                width: 100%;
            }

            100% {
                left: 100%;
                width: 0%;
            }
        }

        @-webkit-keyframes swipe_box2 {
            0% {
                left: 0px;
                width: 0%;
            }

            50% {
                left: 0px;
                width: 80%;
            }

            100% {
                left: 0px;
                width: 0%;
            }
        }

        @keyframes swipe_box2 {
            0% {
                left: 0px;
                width: 0%;
            }

            50% {
                left: 0px;
                width: 80%;
            }

            100% {
                left: 0px;
                width: 0%;
            }
        }

        @-webkit-keyframes show {
            0% {
                color: rgba(255, 255, 255, 0);
                text-shadow: transparent 2px 3px 10px;
            }

            81% {
                color: rgba(255, 255, 255, 0);
            }

            100% {
                color: rgb(255, 255, 255);
            }
        }

        @keyframes show {
            0% {
                color: rgba(255, 255, 255, 0);
                text-shadow: transparent 2px 3px 10px;
            }

            81% {
                color: rgba(255, 255, 255, 0);
            }

            100% {
                color: rgb(255, 255, 255);
            }
        }

        .pl-img {
            background-image: url([[${theme.config.top.above.index_img}]]);

        }

        @media screen and (max-width: 768px) {
            .pl-img {
                background-image: url([[${theme.config.top.above.phone_index_img}]]);
            }
        }

        .typed-cursor {
            opacity: 1;
        }

        .typed-cursor.typed-cursor--blink {
            animation: typedjsBlink 0.7s infinite;
            -webkit-animation: typedjsBlink 0.7s infinite;
            animation: typedjsBlink 0.7s infinite;
        }

        @keyframes typedjsBlink {
            50% {
                opacity: 0.0;
            }
        }

        @-webkit-keyframes typedjsBlink {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
    <script th:inline="javascript">
        function subtitleType() {
            if([[${theme.config.top.above.enable_typed_random}]]){
                fetch("https://v1.hitokoto.cn").then((t => t.json())).then((t => {
                    {
                        const e = "出自 " + t.from;
                        const n = [[${theme.config.top.above.typed}]].map((item) => {
                            return item.realNode.text;
                        });
                        n.push(t.hitokoto, e), window.typed = new Typed("#subtitle", {
                            strings: n,
                            startDelay: 300,
                            typeSpeed: 100,
                            loop: !0,
                            backSpeed: 50
                        })
                    }
                }))
            }else{
                const n = [[${theme.config.top.above.typed}]].map((item) => {
                    return item.realNode.text;
                });
                window.typed = new Typed("#subtitle", {
                    strings: n,
                    startDelay: 300,
                    typeSpeed: 100,
                    loop: !0,
                    backSpeed: 50
                })
            }
        }
        // 防止加载文字太短时第一个自定义文字显示不出来
        setTimeout(()=>{
            "function" == typeof Typed ? subtitleType() : getScript("https://npm.elemecdn.com/typed.js@2.0.12/lib/typed.min.js").then(subtitleType)
        },1800)
    </script>
</th:block>