CSS 未在给定路径中应用动画

Question

我正在尝试将动画应用于此页面的背景。但是，我发现它没有应用在正确的位置，而是应用在背景上，它被应用到 h2 标签。我不知道是什么原因造成的。

Body动画代码：

body{
    margin-top: 6%;
    margin-bottom: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(-30deg, #03a9f4 0%, #3a78b7 50%,
    #262626 50%, #607d8b 100%);
    filter: hue-rotate(120deg);
    animation: animate 10s linear infinite;
}

@keyframes animate
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
}

h2 标签代码：

.list h2{
    text-align: center;
    background: #03a9f4;
    color: white;
    padding: 10px 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-weight: 600;
}

Answer 1

似乎在 body 上设置的动画不适用于 body 元素本身，而是在其子元素上。

如果我们放入具有给定背景和动画的 div 元素，而不是让颜色动画化，当然它的 CSS 设置不会影响 h2 和任何其他元素。

这是一个片段。一些 CSS 可以整理，但这是给出想法和第一个例子。

body, div.bg {
  width:100vw;
  min-height: 100vh;
  margin-top: 6%;
  margin-bottom: 6%;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.bg {
  position: absolute;
  top:0;
  left: 0;
}

div.bg::before{
  content: '';
  margin-top: 6%;
  margin-bottom: 6%;
  width: 100%;
  height: 100%;
  background: linear-gradient(-30deg, #03a9f4 0%, #3a78b7 50%, #262626 50%, #607d8b 100%);
  animation: animate 10s linear infinite;
  z-index:-1;
  position: absolute;
}

@keyframes animate

{

0%

{
    filter: hue-rotate(0deg);
}

100%
{
    filter: hue-rotate(359deg);
}
}


.list h2{
  text-align: center;
  background: #03a9f4;
  color: white;
  padding: 10px 20px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-weight: 600;
}

<body>
<div class="bg"></div>
<div class="list">
  <h2>h2 element</h2>
</div>
</body>

CSS 未在给定路径中应用动画

CSS Animation not being applied in given path

html

css

animation

css-animations

animate.css