我想创建一个网站,当你打开它时,背景会变成不同的颜色。
示例:
/* Chrome, Safari, Opera */
@-webkit-keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
/* Firefox */
@-moz-keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
@keyframes {
from {
background: white;
}
to {
background: #F7F2E0;
}
}
但是当我运行脚本时,没有任何反应。
答案 0 :(得分:1)
您需要为动画添加名称,然后将动画属性添加到所需的元素。
@keyframes background {
from {
background:white;
}
to {
background:#000;
}
}
在下面的animation shorthand中,为forwards
属性添加了值animation-fill-mode
,以便以最后一种颜色结束动画。
body {
animation: background 4s forwards;
}
为简单起见,省略了供应商前缀 - 有关完整的CSS,请参阅the example。
我建议您详细了解CSS animations at MDN。
答案 1 :(得分:0)
您必须为关键帧命名,然后将其应用于正文。 See this example。对于动画和浏览器支持see here。
@keyframes fadeBackgroud{
from {
background:white;
} to {
background:#F7F2E0;
}
}
body {
animation:fadeBackgroud 5s infinite;
}