Question

我想创建一个网站，当你打开它时，背景会变成不同的颜色。

示例：

/* 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;
    }
}

但是当我运行脚本时，没有任何反应。

Answer 1

您需要为动画添加名称，然后将动画属性添加到所需的元素。

Example Here

@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。

Answer 2

您必须为关键帧命名，然后将其应用于正文。 See this example。对于动画和浏览器支持see here。

@keyframes fadeBackgroud{
    from {
        background:white;
    } to {
        background:#F7F2E0;
    }
}

body {
    animation:fadeBackgroud 5s infinite;
}

使用CSS创建网页背景淡入淡出

2 个答案: