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

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下面，为 animation-fill-mode 属性添加值 forwards 以便在最后一种颜色结束动画。

body {
    animation: background 4s forwards;
}

为简单起见省略了供应商前缀 - 请参阅 the example完整的 CSS。

我建议阅读更多关于 CSS animations at MDN 的内容.