测试页面：修订间差异

来自HUIJIA FUN
可视化wikitext
无编辑摘要
无编辑摘要
 
（未显示同一用户的3个中间版本）
第1行： 第1行：
<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>
<tabber>
|-|First Tab Title=
|-|First Tab Title=
第34行： 第222行：


<tabbertransclude>
<tabbertransclude>
无页面|无页面
首页|首页
首页|首页
Second Page Name|Second Tab Title
Third Page Name|Third Tab Title
</tabbertransclude>
</tabbertransclude>


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

2025年9月2日 (二) 23:27的最新版本

HTML 图形入场动画演示

页面标题

这是一个内容区域的示例。动画结束后，您将看到这里的文字优雅地浮现。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

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.



First tab content goes here.

Second tab content goes here.

Third tab content goes here.


Tab content A goes here.

Tab content B goes here.

Tab content C goes here.

Tab content D goes here.

Tab content E goes here.

Tab content F goes here.

Tab content G goes here.

Tab content H goes here.

Tab content I goes here.


Load video
Bilibili
取自“https://huijia.fun/index.php?title=测试页面&oldid=1675”