Question

我是代码初学者。前段时间我看到了一个github项目，使背景颜色自动变化，逐渐从红色变为白色，再变为绿色变为黑色。

似乎不可能再找到它而我正在努力寻找互联网上的选项。我想我真的用正确的话来解释自己。

任何暗示都会非常感激。

感谢。

Answer 1

试试这个CSS： JSFIDDLE

body 
{
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s infinite; /* Firefox */
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}


@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red;}
    25%  {background:white;}
    50%  {background:green;}
    75%  {background:black;}
    100%   {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red;}
    25%  {background:white;}
    50%  {background:green;}
    75%  {background:black;}
    100%   {background:red;}
}

Answer 2

@keyframes bgcolour {
    0% {background-color: red;}
    50% {background-color: green;}
    100% {background-color: blue;}
}

body {
    animation: bgcolour 10s infinite alternate; /* Don't forget the "alternate" which reverses the animation to avoid a jump form 100% to 0% */
}

DEMO

CSS更改（转换）背景颜色

2 个答案: