如何让CSS渐变动画仅显示在页面顶部15%，其余区域黑色且少改HTML？

问题背景 #

在Notion定制平台开发时，需要仅让页面顶部15%区域显示渐变动画，剩余区域保持黑色，且尽可能少修改HTML代码。尝试了初始代码和ChatGPT给出的方案均未生效。

解决方案：使用CSS伪元素实现（零HTML修改） #

利用body::before伪元素创建顶部动画区域，无需新增任何HTML元素，完美适配第三方平台的结构限制。代码如下：

/* 全局基础样式 */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #000; /* 整个页面背景设为黑色 */
  position: relative; /* 为伪元素提供定位上下文 */
}

/* 顶部15%渐变动画区域 */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15vh; /* 基于视口高度的15%，适配各种屏幕 */
  background: linear-gradient(270deg, #eb5666, #e4c545, #ff8c4c, #0b1215);
  background-size: 800% 800%;
  /* 渐变动画 */
  -webkit-animation: gradientShift 55s ease infinite;
  -moz-animation: gradientShift 55s ease infinite;
  animation: gradientShift 55s ease infinite;
  z-index: 0; /* 确保在页面内容下方，不遮挡原有元素 */
}

/* 确保原有页面内容不被伪元素遮挡 */
.page {
  position: relative;
  z-index: 1;
}

/* 动画关键帧定义 */
@-webkit-keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@-moz-keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

方案优势 #

1. 零HTML修改：仅通过CSS伪元素实现，完全适配Notion平台无法修改HTML的限制
2. 可靠的高度控制：使用15vh（视口高度的15%），避免父元素高度上下文缺失导致的百分比失效问题
3. 不影响原有布局：伪元素绝对定位，不会打乱页面原有结构
4. 兼容性保障：保留了webkit和moz前缀，适配不同浏览器

原方案失效原因 #

ChatGPT给出的代码新增了.page-container和.black-section元素，但在Notion定制平台中无法添加这些额外的HTML结构，因此代码无法生效；同时flex布局可能与平台原有样式冲突，导致布局异常。

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