测试页面：修订间差异

来自HUIJIA FUN
可视化wikitext
小 （修改页面）
无编辑摘要
 
第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:  
{{#CSS:  
#firstHeading,  
#firstHeading,  

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”