HTML/CSS问题：欢迎动画结束后切换背景图及文本居中等需求

问题1：背景图过渡与文本居中优化 + 背景图创意方案 #

背景图过渡修复 #

你当前用h1:after的content插入背景图的方式无法触发过渡效果，因为content不属于可过渡的CSS属性。正确做法是把背景图设置在容器（比如section）上，通过动画结束事件触发背景切换的过渡：

文本居中修复 #

原代码的h1定位逻辑存在细微偏移风险，改用flex布局能实现更稳定的居中效果：

修改后的完整代码 #

body {
  margin: 0;
  padding: 0;
  background: black;
}

section {
  height: 100vh;
  background: #000;
  /* 预设背景图并添加过渡 */
  background-image: url('https://images.wallpaperscraft.com/image/single/space_stars_constellation_162862_1920x1080.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 3s ease-in-out; /* 中等慢速过渡 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 动画结束后添加此类触发背景显示 */
section.show-bg {
  opacity: 1;
}

h1 {
  margin: 0;
  padding: 0;
  color: #ddd;
  font-size: 6em;
  font-family: sans-serif;
}

h1 span {
  display: inline-block;
  animation: animate 1s linear forwards;
  border:2px solid black;
}

@keyframes animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    color: red;
    background-color: white;
    border: 2px solid red;
    border-radius: 4px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
  }
}

h1 span:nth-child(1) { animation-delay: 1.5s; }
h1 span:nth-child(2) { animation-delay: 2.5s; }
h1 span:nth-child(3) { animation-delay: 3.5s; }
h1 span:nth-child(4) { animation-delay: 4.5s; }
h1 span:nth-child(5) { animation-delay: 5.5s; }
h1 span:nth-child(6) { animation-delay: 6.5s; }
h1 span:nth-child(7) { animation-delay: 7.5s; }

<section>
  <h1>
    <span>W</span>
    <span>E</span>
    <span>L</span>
    <span>C</span>
    <span>O</span>
    <span>M</span>
    <span>E</span>
  </h1>
</section>

<script>
// 监听最后一个字母的动画结束事件，触发背景切换
const lastSpan = document.querySelector('h1 span:last-child');
lastSpan.addEventListener('animationend', () => {
  document.querySelector('section').classList.add('show-bg');
});
</script>

优质背景图创意方案 #

• 动态渐变类：用CSS线性/径向渐变，比如background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);，搭配轻微动画增强氛围感
• 极简几何类：低饱和度几何图形拼接，纯色块+线条组合，适配科技风
• 自然氛围类：星空、星云、雪山、深海等高清图，契合深色主题
• 粒子动态类：用CSS动画实现粒子漂浮、线条流动效果，无需外部图片
• 复古像素风：低分辨率像素图案，适配复古风格欢迎页

问题2：增大字母与边框的间距 #

效果对比：

• Before：字母W紧贴红色边框，无间距
• After：字母W与红色边框之间有明显留白

直接给包裹字母的span添加padding属性即可，纯CSS实现：

修改后的关键代码 #

h1 span {
  display: inline-block;
  animation: animate 1s linear forwards;
  border:2px solid black;
  padding: 0.2em 0.4em; /* 上下、左右间距，可按需调整 */
}

如果需要单独调整某个字母（比如W）的间距，可单独给对应span设置：

h1 span:nth-child(1) {
  animation-delay: 1.5s;
  padding: 0.2em 0.5em; /* 给W设置更大的左右间距 */
}

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