我正在尝试将动画应用于此页面的背景。然而，我发现它并没有应用在正确的地方，而是应用在背景上——它被应用到h2标签。我不知道是什么原因造成的。
车身动画代码：
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;
}
主体上的动画集似乎不是针对主体元素本身，而是针对其子元素。
如果我们放入一个具有给定背景和动画的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>