Question

是否可以使用css fiddle在几秒钟（10到20秒）后更改<p>元素的背景颜色？我不想使用js。

<p style="background:#E1FEE0;">Human</p>

Answer 1

使用CSS动画，您可以从99.9%跳到100%。只需在#E1FEE0中设置初始背景颜色（99.9%），然后在100%中设置最终背景颜色。如果您想要转换颜色，只需增加差距并对example使用80%之类的内容。

Example Here

p {
    display: inline;
    animation: background-fade 10s forwards;
}

@keyframes background-fade {
    99.9% {
        background:#E1FEE0;
    }
    100% {
        background:#000;
    }
}

为简单起见，省略了其他供应商前缀。

Answer 2

其实你可以。您应该使用CSS动画来实现此目的。 Here's CSS声明示例：

@-webkit-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@-moz-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@-o-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}

.animated {
  -webkit-animation: change-color 2s infinite; /* Safari 4+ */
  -moz-animation:    change-color 2s infinite; /* Fx 5+ */
  -o-animation:      change-color 2s infinite; /* Opera 12+ */
  animation:         change-color 2s infinite; /* IE 10+ */
}

在JSFiddle上试试。

有关更多阅读，here's有关CSS动画的链接。

几秒钟后改变一次背景颜色

2 个答案: