网站图片加载时全屏显示后缩至指定位置的实现方法咨询

核心思路 #

先让图片在页面加载时以全屏状态覆盖视口，通过动画过渡到导航栏下方的预设横幅位置，核心分布局结构、初始样式、动画触发三个环节实现。

1. 基础布局结构 #

把banner图片放在导航栏之后，保证DOM结构清晰：

<nav class="navbar">
  <!-- 导航栏内容 -->
</nav>
<img src="your-banner-image.jpg" class="banner" alt="Banner">
<!-- 页面其他内容 -->

2. 初始样式与预设位置样式 #

用CSS定义两种状态：全屏加载态、最终横幅态，同时处理图片缩放避免失真：

/* 导航栏示例样式 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  z-index: 10; /* 确保导航栏始终在最上层 */
}

/* 初始全屏状态 */
.banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* 保持图片比例并覆盖视口 */
  z-index: 5; /* 低于导航栏，高于页面其他内容 */
}

/* 最终横幅状态 */
.banner.final-state {
  position: relative;
  width: 100%;
  height: 300px; /* 自定义横幅高度 */
  margin-top: 60px; /* 与导航栏高度一致，避免重叠 */
}

3. 动画触发的两种方式 #

方式一：纯CSS自动触发

通过CSS关键帧实现自动过渡，页面加载后立即执行动画：

.banner {
  /* 保留上述初始样式 */
  animation: shrinkToBanner 1.5s ease-in-out forwards;
}

@keyframes shrinkToBanner {
  to {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 60px;
    top: auto;
    left: auto;
  }
}

forwards关键字会让动画结束后保持最终状态。

方式二：JS控制（更灵活）

如果需要等资源加载完成再触发，或配合其他逻辑，用JS监听加载事件：

const banner = document.querySelector('.banner');

// 等图片自身加载完成后触发
banner.onload = function() {
  // 可选：延迟500ms触发，给用户短暂的全屏展示时间
  setTimeout(() => {
    banner.classList.add('final-state');
  }, 500);
};

// 或者等整个页面资源加载完成
window.addEventListener('load', () => {
  banner.classList.add('final-state');
});

对应的CSS需添加过渡属性：

.banner {
  /* 保留初始样式 */
  transition: all 1.5s ease-in-out; /* 控制过渡动画的时长和节奏 */
}

4. 细节优化 #

• 用object-fit: cover或contain根据需求调整图片缩放规则，避免拉伸变形；
• 动画时长（如1.5s）和缓动函数（如ease-in-out）可按需修改，让过渡更自然；
• 若页面其他内容在动画期间被遮挡，可给其初始设置visibility: hidden，动画结束后改为visible；
• 导航栏固定时，横幅最终位置的margin-top需与导航栏高度匹配，防止重叠。

内容的提问来源于stack exchange，提问作者Steve1286