微件:Intro

       <img src="" alt="团队LOGO" class="intro-logo">
       

八叶莲华会社

<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>

八叶莲华会社

“中华Air本文化的活化石，了解Air本文化的最好途径”

跳过 🔊