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

<div id="intro-container" class="intro-container">
    <div class="intro-content">
        <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" class="intro-logo">
        
        <h1 class="intro-title">
            八叶莲华会社
        </h1>
    </div>
</div>

<style>
/* * 动画容器 (全屏背景)
 * 使用径向渐变背景，从中心向外由深变浅，营造视觉焦点。
 */
.intro-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(34, 34, 34, 0.8) 0%, rgba(10, 10, 10, 0.95) 100%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* 更平滑的淡入淡出 */
}

/* 动画内容区 (LOGO和文字的容器) */
.intro-content {
    text-align: center;
    /* 为内容添加一个白色的光晕，使其在深色背景上更突出 */
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.15));
}

/* LOGO样式和动画 */
.intro-logo {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto 25px; /* 增加了与文字的间距 */
    opacity: 0;
    transform: translateY(20px); /* 初始位置在下方20px处 */
    transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1); /* 优雅的缓动效果 */
}

/* 标题文字样式和动画 */
.intro-title {
    color: #FFFFFF;
    font-size: 2.8em; /* 稍微增大字体 */
    font-weight: 500; /* 使用适中的字重，更显优雅 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(0, 0, 0, 0.5); /* 更柔和的文字阴影 */
    letter-spacing: 2px; /* 增加字间距 */
    opacity: 0;
    transform: scale(0.95); /* 初始状态为轻微缩小 */
    transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* === 动画触发类 === */
/* 当容器加载时，为其子元素设置延迟，实现分层动画 */
.intro-container.is-active .intro-logo {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* LOGO先动 */
}

.intro-container.is-active .intro-title {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.4s; /* 文字后动 */
}
</style>

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

    // 1. 触发背景和内容入场动画
    // 使用 requestAnimationFrame 确保在浏览器准备好渲染时才开始动画
    requestAnimationFrame(() => {
        container.style.opacity = '1';
        container.classList.add('is-active');
    });

    // 2. 设置动画在4.5秒后开始退场
    setTimeout(() => {
        container.style.opacity = '0';
        
        // 3. 在淡出动画结束后 (1.2秒后)，彻底隐藏容器，防止干扰页面
        setTimeout(() => {
            container.style.display = 'none';
        }, 1200); // 这个时间应与 intro-container 的 transition 时长匹配

    }, 4500); // 动画总展示时长，可按需修改
});
</script><noinclude>
{{#Widget:Intro}}
</noinclude>