仅使用 CSS 的背景效果答案

【问题标题】：Background effect with CSS only仅使用 CSS 的背景效果
【发布时间】：2022-09-23 18:56:17
【问题描述】：

无论如何，我知道如何使用 CSS 创建这样的背景动画吗？

需要什么动画？你做了什么搜索？

【解决方案1】：

您可以创建两个absolute html 元素并相应地左右对齐它们。然后您可以在这些元素上应用 CSS 径向渐变，例如：background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%); 否则，您可以使用伪元素 (:after, :before) 代替 HTML 标记。

这是您可以执行的操作的简要说明：

.hero {
  height: 100vh;
  width: 100vw;
  background-color: #000;
  position: relative;
}
.hero:after,
.hero:before {
  content: '';
  background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%);
  display: block;
  position: absolute;
}
.hero:before {
  left: -100px;
  bottom: 0;
  width: 300px;
  height: 300px;
}
.hero:after{
  right: -100px;
  top: 0;
  width: 300px;
  height: 300px;
}

&lt;div class="hero"&gt;&lt;/div&gt;

为了让生活更轻松，您可以使用 CSS Gradient Generators，例如：https://cssgradient.io/

【讨论】：