欢迎来到网页工程c工作坊

欢迎来到网页工程C工作坊！工作坊的主要目的是为大家提供一些有关网页设计及开发等等的热门资讯，希望大家可以将资讯用于自己的作品上，以及能启发大家的创作灵感！

利用 CSS 中的 linear-gradient、animation 及 keyframes，无需要任何 javascript 的辅助，便可以制作出渐变背景颜色的特别效果：

以自定的渐变颜色（此例子使用 linear-gradient）作为区域的背景（background-image）

当使用渐变色作为背景时，系统会自动将整个颜色段完整显示出来。加入 background-size: 500% 的作用是令渐变色背景大于所能显示的范围，亦即是只能显示渐变色中的某一部分颜色。

因为渐变颜色背景比显示范围大的关系，现在只要设定 background-position 到不同位置，便能做出显示不同颜色段的效果。

利用刚建立的 bg-amination 设定 animation，设定由 0% 到 100% 所需的时间（8s），infinite 表示无限循环，alternate 表示当动画到最尾之后便自动反方向执行，这样可令渐变效果更平滑。