css 中间到两端渐变

CSS 中心到两端渐变是一种常见的渐变效果，它可以很好地应用于各种设计中。这种效果实现起来很简单，只需要在 CSS 中添加一些代码即可。下面我们来看下具体实现方法：

.gradient {
       background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
       background-size: 200% 100%;
       background-position: left center;
       animation: gradient 10s ease infinite;
}
@keyframes gradient {
   0% {
    background-position: left center;
}
   100% {
    background-position: right center;
}
}
    

首先，我们定义了一个名为“gradient”的类，用来设置要应用这种渐变效果的元素。接着，利用CSS3的属性“background”来设置渐变背景。这里采用了线性渐变，即“linear-gradient”，并通过“to right”指定了渐变的方向。在“background”中，我们设置了七种颜色，即从红、橙、黄、绿、蓝、靛、紫的顺序进行渐变。

然后，我们设置了“background-size”为“200% 100%”，意思是将背景大小设置为两倍宽度，并让高度与父元素高度相等。接着，我们将渐变的起点设置在了屏幕的左侧，通过“background-position”属性来设置。

最后，我们定义了一个名为“gradient”的动画，通过“keyframes”属性来设置动画效果。这里我们让背景的起点从屏幕的左侧移动到右侧，到100%的时候背景就到达右端了。同时，我们设置动画持续10秒，并采用“infinite”来让动画无限循环播放。

这就是CSS中心到两端渐变的完整代码，通过这些简单的代码，我们可以轻易地实现各种各样的背景渐变效果。无论是网站、APP，还是其他设计中，这种效果都可以带来很好的视觉体验，帮助我们更好地吸引用户的注意力。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！