2

我有这个 HTML 标签：

<div id="alert">Warning!!</div>​

我想给它一个动画效果，在红黑无限循环中改变它的字体颜色。

我尝试使用 Webkit 颜色转换循环作为带有字体颜色的背景颜色：

#alert {font-color: #39f !important;}
@-webkit-keyframes colours {
      0% {font-color: #000;}
     50% {font-color: #990000;}
     100% {font-color: #FF0000;}

}
#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}​

但它不起作用。

参考：http
://snipplr.com/view/33728/ 我的代码：http: //jsfiddle.net/LDRR7/9/

4

5 回答 5

5

您想使用颜色，因为 font-color 属性不存在。

另请注意，您使用的教程适用于 webkit 浏览器，但不适用于 firefox！所以我添加了firefox前缀。

见http://jsfiddle.net/LDRR7/21/

    #alert {color: #39f !important;}
@-webkit-keyframes colours {
     0% {color: #39f;}
 25% {color: #8bc5d1;}
 50% {color: #f8cb4a;}
 75% {color: #8bc5d1;}
100% {color: #39f;}

}
@-moz-keyframes colours {
      0% {color: #39f;}
 25% {color: #8bc5d1;}
 50% {color: #f8cb4a;}
 75% {color: #8bc5d1;}
100% {color: #39f;}

}

#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: normal;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: colours;
    -moz-animation-timing-function: ease;
}
于 2012-11-29T16:16:10.083 回答
3

使用color，不使用font-color。

此外，您的动画是错误的，它不会褪色回原来的颜色，试试这个：

#alert {color: #39f !important;}
@-webkit-keyframes colours {
      0% {color: #39f;}
     25% {color: #8bc5d1;}
     50% {color: #f8cb4a;}
     75% {color: #8bc5d1;}
    100% {color: #39f;}

}
#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}​

示例：http: //jsfiddle.net/pitaj/LDRR7/13/

于 2012-11-29T16:20:16.243 回答
0

css 无法识别“字体颜色”。尝试“颜色”，并将持续时间更改为喜欢 1 秒以获得“闪光”效果。

于 2012-11-29T16:21:11.627 回答
0

使用 Css 更改颜色很容易。调用类并使用动画， -webkit-animation属性。这两个属性调用了一种函数，你会以秒为单位传递时间（例如：animation: colorchange 50s; -webkit-animation: colorchange 50s;

）。然后你改变函数内部的颜色，在我们的例子中它被称为“colorchange”。使用函数的方法是使用@keyframes colorchange或@-webkit-keyframes colorchange。很简单。另外要注意的是浏览器。对于像chrome safari这样的浏览器使用@-webkit -keyframes colorchange 并指定颜色。U 可以 c 魔术。一个明确的例子如下：

#Class .inner {
        -moz-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        -webkit-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        -ms-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        display: -ms-flexbox;
        -ms-flex-align: center;
        -ms-flex-pack: center;
        background: #e74c3c;                                  /*circle circle*/
        border-radius: 100%;
        width: 35em;
        height: 35em;
        padding: 4em;
        text-align: center;
        box-shadow: 0 0 0 1em #FFF;
        cursor: default;

        animation: **colorchange** **50s**;
        -webkit-animation: **colorchange** **50s**;
    }

@keyframes colorchange
{
0%   {background: #e74c3c;}
15%  {background: violet;}
30%  {background:indigo;}
45%  {background: blue;}
60% {background: green;}
75% {background: orange;}
90% {background: purple;}
100% {background: #e74c3c;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0%   {background: #e74c3c;}
    15%  {background: violet;}
    30%  {background:indigo;}
    45%  {background: blue;}
    60% {background: green;}
    75% {background: orange;}
    90% {background: purple;}
    100% {background: #e74c3c;}
}

希望它易于理解（'-'）；

于 2017-01-22T14:36:27.087 回答
0 
#alert {color: #FF35CE !important; font-weight:700 ;animation:changecolor 5s;
-moz-animation:changecolor 5s; /* Firefox */
-webkit-animation:changecolor 5s; /* Safari and Chrome */
-o-animation:changecolor 5s; /* Opera */
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}

@keyframes changecolor
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}

@-moz-keyframes changecolor /* Firefox */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {background:blue;}
75% {color:green;}
100%   {color:red;}
}

@-webkit-keyframes changecolor /* Safari and Chrome */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}

@-o-keyframes changecolor /* Opera */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}
于 2017-05-11T03:34:35.060 回答