视觉错觉与流动动画

色彩的流动

看上去在流动：

实际上没有任何位移。

CSS代码：
.flow-colorful {
    max-width: 600px;
    height: 150px;
    background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
    animation: hue 6s linear infinite;
}
@keyframes hue {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}
HTML代码：
<div class="flow-colorful"></div>

文字动效

第五届CSS大会

CSS代码：
.flow-slogon {
    font-size: 120px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia);
    animation: hue 6s linear infinite;
}
HTML代码：
<h2 class="flow-slogon">第五届CSS大会</h2>