查看“微件:Intro”的源代码

<div id="intro-animation-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 1s ease-in-out;">
    <div id="intro-content" style="text-align: center; transform: scale(0.8); opacity: 0; transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);">
        <img src="https://soka.cafe/images/b/b3/%E5%85%AB%E5%8F%B6%E8%8E%B2%E5%8D%8E%E4%BC%9A%E7%A4%BE.jpg" alt="团队LOGO" style="max-width: 150px; height: auto; display: block; margin: 0 auto 20px;">
        
        <h1 style="color: white; font-size: 2.5em; font-weight: bold; text-shadow: 2px 2px 8px rgba(0,0,0,0.5);">
            八叶莲华会社
        </h1>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('intro-animation-container');
    const content = document.getElementById('intro-content');

    // 确保页面加载时元素可见
    container.style.opacity = '1';

    // 延时触发内容动画
    setTimeout(() => {
        content.style.opacity = '1';
        content.style.transform = 'scale(1)';
    }, 500); // 0.5秒后开始

    // 整个动画在4秒后消失
    setTimeout(() => {
        container.style.opacity = '0';
        // 在动画结束后，将元素从DOM中移除或隐藏，以防干扰页面后续操作
        setTimeout(() => {
            container.style.display = 'none';
        }, 1000); // 等待淡出动画完成
    }, 4000); // 4秒后开始消失
});
</script>

<style>
/* 可以在这里添加额外的CSS样式，不过内联样式已足够实现效果 */
/* 为了确保字体在不同Wiki上看起来更好，可以考虑引入一个Web字体，但这需要更高级的配置 */
</style><noinclude>
{{#Widget:Intro}}
</noinclude>