Question

我有一个坚实的背景，我想在Chrome上使用CSS替换循环的亮度。背景将更改为与用户的个人资料相匹配，因此它不会始终保持相同的颜色。

作为一个例子：背景可以从红色开始，过渡到粉红色，然后在一秒钟后变回红色。

另一个例子：背景可以从蓝色开始，过渡到浅蓝色，然后在一秒钟后变回蓝色。

我可以通过调整颜色的亮度和对比度来完成颜色效果，但我不知道如何使用webkit。

如何使用CSS和webkit交替亮度和对比度？

Answer 1

更新：你可以用相同的方式为亮度和对比度制作动画，但我不确定你想要用它来实现粉红色。

Filters require the prefix -webkit-

@keyframes example {
    0%   {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
    50%  {
        filter: brightness(0.4);
        filter: contrast(0.4);
        -webkit-filter: brightness(0.4);
        -webkit-filter: contrast(0.4);
    }
    100% {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
}

<强> Fiddle

为什么在颜色之间进行补间时可以使用亮度和对比度？

div {
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes example {
    from {background: red;}
    to {background: pink;}
}

<强> Fiddle

或者如果你想在没有闪烁的情况下循环播放

@keyframes example {
    0%   {background: red;}
    50%  {background: pink;}
    100% {background: red;}
}

<强> Fiddle

CSS亮度和对比度动画

1 个答案: