CSS加载动画置顶、页脚内容居底居中的布局问题咨询

调整HTML结构和对应CSS样式即可实现两个布局需求，参考预期效果如下：

修改后可直接运行的完整代码：

<html>
<style>
.headerStyle {
  border-color: black;
  margin: 0 0 12px 0;
  font-size: 20px;
}
body {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  border-style: solid;
  border-width: 10px;
  border-radius: 5px;
  margin: 0;
  padding: 20px;
  animation: pulse 5s infinite;
}
.container {
  position: absolute;
  width: 100%;
  left: 0;
  top: -20px;
  margin: 0;
  padding: 0;
}
.Loading {
  display: block;
  width: 100%;
  height: 10px;
  background: #f1f1f1;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}
.Loading:after {
  content: "";
  position: absolute;
  background: blue;
  width: 10%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  animation: load 5s infinite;
}
.footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer a {
  margin: 0 8px;
}
@keyframes load {
  0% { left: 0%; }
  25% { width: 50%; left: 50%; }
  50% { width: 10%; left: 90%; }
  75% { width: 50%; left: 0%; }
  100% { width: 10%; left: 0%; }
}
@keyframes pulse {
  0% { border-color: red; }
  25% { border-color: orange; }
  50% { border-color: brown; }
  75% { border-color: #d94d5f; }
  100% { border-color: #ffcccb; }
}
</style>
<body>
  <div class="container">
    <div class="Loading"></div>
  </div>

  <div class="footer">
    <p class="headerStyle"><b>Get In Touch With Me</b></p>
    <div>
      <a href="https://stackoverflow.com/">
        <img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
      </a>
      <a href="https://www.linkedin.com">
        <img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
      </a>
    </div>
  </div>
</body>
</html>

核心修改点 #

• 加载条移到顶部边框上方：
  • 将加载条的DOM节点从footer内部移到body最开头，避免受底部布局影响
  • 给body添加相对定位作为定位基准，加载条容器使用绝对定位向上偏移20px（10px边框宽度+10px加载条自身高度），刚好显示在页面上边框外侧，不会被边框遮挡
• 底部内容居中置底：
  • 给body设置min-height: 100vh和box-sizing: border-box，让body高度始终占满整个视口
  • footer使用绝对定位固定在页面底部区域，通过flex布局设置纵向排列、水平居中，内部文字、图标自动居中对齐
  • 清除p标签默认外边距，给两个图标之间添加适当间距，优化显示效果

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