查看“测试页面”的源代码

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 图形入场动画演示</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            color: #202122;
            margin: 0;
            line-height: 1.6;
        }
        .container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2em;
        }
        #mw-panel {
            flex: 0 0 180px;
            margin-right: 2em;
            padding: 1em;
            background-color: #eaecf0;
            border-radius: 8px;
        }
        #mw-panel ul {
            list-style: none;
            padding: 0;
        }
        #mw-panel li {
            padding: 0.5em 0;
        }
        .content-wrapper {
            flex: 1;
        }
        #firstHeading {
            border-bottom: 1px solid #a2a9b1;
            padding-bottom: 0.5em;
            font-size: 2.2em;
            margin-top: 0;
        }
        p {
            margin-bottom: 1em;
        }

        body.page-loading #mw-content-text,
        body.page-loading #mw-panel,
        body.page-loading #firstHeading {
            opacity: 0;
        }

        .curtain-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 1fr);
            background-color: #1a1a1a;
            pointer-events: none;
            transition: opacity 0.5s ease-in-out;
        }

        .curtain-block {
            background-color: #2c3e50;
            opacity: 1;
            transform: scale(1);
            transition: transform 0.5s ease, opacity 0.5s ease;
        }

        .curtain-container.animate-out .curtain-block {
            transform: scale(0);
            opacity: 0;
        }

        .curtain-container.hidden {
            opacity: 0;
            visibility: hidden;
        }

        @keyframes fadeInSlideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .content-fade-in {
            animation: fadeInSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content-wrapper">
            <h1 id="firstHeading">页面标题</h1>
            <div id="mw-content-text">
                <p>这是一个内容区域的示例。动画结束后，您将看到这里的文字优雅地浮现。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
                <p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        jQuery(function($) {
            $('body').addClass('page-loading');

            const curtainContainer = $('<div class="curtain-container"></div>');
            for (let i = 0; i < 100; i++) {
                curtainContainer.append('<div class="curtain-block"></div>');
            }
            $('body').append(curtainContainer);

            function startEntryAnimation() {
                const blocks = $('.curtain-block');
                
                curtainContainer.addClass('animate-out');
                
                blocks.each(function(i) {
                    $(this).css('transition-delay', (i * 0.015) + 's');
                });

                setTimeout(function() {
                    curtainContainer.addClass('hidden');
                    setTimeout(function() {
                        curtainContainer.remove();
                    }, 500);

                    const contentElements = [
                        '#firstHeading',
                        '#mw-content-text',
                        '#mw-panel'
                    ];
                    
                    contentElements.forEach(function(selector, index) {
                        setTimeout(function() {
                            $(selector).addClass('content-fade-in');
                        }, index * 150);
                    });

                    $('body').removeClass('page-loading');

                }, 1200);
            }

            $(window).on('load', function() {
                startEntryAnimation();
            });

            setTimeout(function() {
                if ($('body').hasClass('page-loading')) {
                    startEntryAnimation();
                }
            }, 3000);
        });
    </script>

</body>
</html>

{{#CSS: 
#firstHeading, 
li#ca-talk, 
li#ca-watch, 
li#ca-unwatch, 
li#ca-history, 
li#ca-nstab-main, 
li#ca-viewsource, 
#catlinks-sidebar, 
#mw-normal-catlinks, 
#ca-view,
#siteSub
div#site-navigation.sidebar-chunk {
    display: none !important;
}

}}


<tabber>
|-|First Tab Title=
First tab content goes here.
|-|Second Tab Title=
Second tab content goes here.
|-|Third Tab Title=
Third tab content goes here.
</tabber>



<tabber>
|-| First Tab Title =
{{#tag:tabber
| Tab Title A = Tab content A goes here.
{{!}}-{{!}} Tab Title B = Tab content B goes here.
{{!}}-{{!}} Tab Title C = Tab content C goes here.
}}
|-| Second Tab Title =
{{#tag:tabber
| Tab Title D = Tab content D goes here.
{{!}}-{{!}} Tab Title E = Tab content E goes here.
{{!}}-{{!}} Tab Title F = Tab content F goes here.
}}
|-| Third Tab Title =
{{#tag:tabber
| Tab Title G = Tab content G goes here.
{{!}}-{{!}} Tab Title H = Tab content H goes here.
{{!}}-{{!}} Tab Title I = Tab content I goes here.
}}
</tabber>



<tabbertransclude>
无页面|无页面
首页|首页
</tabbertransclude>

{{#evt:
service=bilibili
|id=https://player.bilibili.com/player.html?bvid=1TQ4y1g783&page=1
|alignment=right
}}