如何实现全屏CSS旋转锥形渐变背景？现有代码无法全屏求解决

你的代码核心问题是：锥形渐变容器仅设置为屏幕尺寸，旋转时容器边角无法覆盖全屏，导致露出底层黑色背景。通过调整伪元素的尺寸与定位即可解决：

修改方案 #

html, body {
   margin: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden; /* 新增：避免页面出现滚动条 */
}

body {
   background: #000;
}

#conic-bg {
   width: 100vw;
   height: 100vh;
   position: relative;
   overflow: hidden;
   
   /* 居中文本 */
   text-align: center;
   align-items: center;
   display: flex;
}

#conic-bg::before {
   background-image: conic-gradient(red, yellow);
   content: "";
   /* 放大至屏幕对角线长度（约为边长的1.42倍），确保旋转时完全覆盖全屏 */
   width: 142vw;
   height: 142vh;
   position: absolute;
   /* 居中定位，旋转时中心保持在屏幕中点 */
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0deg);
   animation: spin 3s linear infinite;
}

@keyframes spin {
   100% {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

.content {
   font-size: 1.5vw;
   line-height: 0;
   color: #fff;
   position: relative;
   margin: 0 auto;
}

.text {
   margin: 0;
   padding: 0;
   font-weight: bold;
   font-size: 4vw;
   line-height: 3vw;
}

关键改动说明 #

• 给html, body添加overflow: hidden，防止页面因元素溢出出现滚动条
• 将伪元素宽高设为142vw/142vh，覆盖屏幕对角线范围，避免旋转时露出空白
• 通过top:50%; left:50%; transform: translate(-50%, -50%)将伪元素居中，确保旋转中心与屏幕中心重合
• 调整动画中的transform属性，同时保留居中偏移与旋转逻辑

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