如何做一个颜色渐变的网页

一，例如，拿main标签举例。

我们先给main标签一个类名，就叫它shouye吧，嗯，首页

二，用css修饰

代码如下

        .shouye {
            padding: 100vh;
            background-image: linear-gradient(125deg, #ff0000, #4562e0, #da6262, #ffbb00);
            background-size: 500%;
            animation: bgmove 20s infinite;
        }

这段代码是一个CSS样式规则，用于定义一个名为"shouye"的类。该类具有以下属性和效果：

padding: 100vh;设置元素的内边距为视口高度的100%。
background-image: linear-gradient(125deg, #ff0000, #4562e0, #da6262, #ffbb00);`：设置元素的背景图像为线性渐变，从红色（#ff0000）到蓝色（#4562e0），再到红色（#da6262）和黄色（#ffbb00）。渐变的角度为125度。
background-size: 500%：设置背景图像的大小为原始大小的500%。
animation: bgmove 20s infinite：应用名为"bgmove"的动画效果，持续时间为20秒，并无限循环播放。

这段代码的作用是为具有"shouye"类的元素设置背景图像和动画效果。

接下来我们既然应用名为"bgmove"的动画效果，接下来，我们就让它动

代码如下

        @keyframes bgmove {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

这段代码是一个CSS关键帧动画规则，用于定义一个名为"bgmove"的动画效果。该动画具有以下关键帧：

0%：动画开始时，背景图像的位置为0%水平位置和50%垂直位置。
50%：动画中间时，背景图像的位置为100%水平位置和50%垂直位置。
100%：动画结束时，背景图像的位置回到0%水平位置和50%垂直位置。

这段代码的作用是为具有"shouye"类的元素设置背景图像的动画效果，使其在水平和垂直方向上循环移动。

渐变动态效果页面

其实我们可以将500%的背景改小点，200%，效果会更佳