-2

我正在尝试学习 CSS。我试图做一个简单的动画：通过使用关键帧改变跨度的背景颜色，但没有任何改变/动画

我的代码如下所示：

HTML：

    <span class="brand1">Test</span>

CSS：

`body{
    margin: 0;
    padding: 0;}

.brand1{
     display: block;
    font-size: 2em;
    width: 10vw;
    -moz-animation: test, 2s, infinite;
    animation: test, 2s, infinite;

}
#header{
    width: 100%;
    background-color: teal;
}

@keyframes test{
    from {background-color: tomato; }
    to { background-color: violet; }
}

@-moz-keyframes test{
    from {background-color: tomato; }
    to { background-color: violet; }
}`

我使用 Mozilla，所以我认为不应该有任何兼容性问题。那么我的代码中的问题在哪里？

4

2 回答 2

0

1）因为你在动画属性中放了逗号，所以我们需要使用空格而不是逗号来分隔属性方法。

2）如果你想改变文本的颜色，你可以使用color属性来改变字体的颜色，而不是background-color属性，它会改变你网页的背景颜色。

这是我对其进行更改的代码。你可以看看。

body{
    margin: 0;
    padding: 0;}

.brand1{
     display: block;
    font-size: 2em;
    width: 10vw;
    animation: test 1s infinite;

}


@keyframes test{
    from {color: tomato; }
  to { color: violet; }
}
 <span class="brand1">Test</span>

于 2019-11-07T10:25:31.207 回答
0

您的动画.brand1没有正确编写，您需要将持续时间和动画分开。

这是您需要的示例

p {
   animation-duration: 25s;
   animation-name: slidein;
}

@keyframes slidein {
   from {
       margin-left: 100%;
       width: 300%;
   }
   75% {
       font-size: 300%;
       margin-left: 25%;
       width: 150%;
   }

   to {
       margin-left: 0%;
       width: 100%;
   }
}

在这里，您的代码以这种方式修改

.brand1 {
    display: block;
    font-size: 2em;
    width: 10vw;
    animation-duration: 1s;
    animation: test;
}


@keyframes test {
    from {color: tomato; }
    to { color: violet; }
}
于 2019-11-07T10:34:45.930 回答