颜色的流动与色调变化

回到相关文章 »

色彩的流动

看上去在流动：

实际上没有任何位移。

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>

文字动效

第4届中国前端开发者千人峰会

CSS代码：
.flow-slogon {
    font-size: 100px;
    -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">第4届中国前端开发者千人峰会</h2>