CSS |色调背景

色调背景是一种新设计方法的概念，专注于干净和美观的 UI。它使网站具有干净和美观的外观。它非常适合专业网站，例如某些产品登陆页面或某些组织的主页。它还有一个高级版本，其中颜色不断变化，我们将只查看高级部分，因为如果您知道如何制作高级背景，您就可以制作基本部分。

方法：方法是提供渐变背景并制作一些边框以使其具有闪亮的反射外观。对于高级概念，我们将使用关键帧来更改背景颜色。

HTML 代码：在这部分中，我们创建了一个部分。

  
    
    
    
 
  
    
GeeksforGeeks
  

CSS 代码：对于 CSS，请按照以下给出的步骤操作。

• 第 1 步：使用线性渐变应用基本渐变背景
• 第 2 步：现在应用名为 animate的标识符的动画属性
• 第 3 步：现在使用关键帧使用色调旋转以您选择的任何角度旋转色调。这将使每一帧的颜色发生变化。我们将帧分为三部分，但您可以根据需要选择分割
• 第 4 步：现在使用 beforeselector 创建从顶部出现的左侧边框。
• 第 5 步：现在使用 afterselector 创建从顶部出现的右侧边框。

提示：如果您需要基本背景，关键帧步骤是完全可选的。产生反射效果的边框可以是不同类型的。我们选择使用从顶部出现的边界。您可以根据自己的需要和创造力改变他们的新兴方向和几乎所有的东西。

section {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       background: linear-gradient(90deg, #07f79b, #01442a);
       animation: animate 20s linear infinite;
     }
     @keyframes animate {
       0% {
         filter: hue-rotate(0deg);
       }
 
       50% {
         filter: hue-rotate(360deg);
       }
 
       100% {
         filter: hue-rotate(0deg);
       }
     }
 
     section::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       border-top: 100vh solid transparent;
       border-left: 100vh solid #fff;
       opacity: 0.1;
     }
 
     section::after {
       content: "";
       position: absolute;
       bottom: 0;
       right: 0;
       border-top: 100vh solid transparent;
       border-right: 100vh solid #fff;
       opacity: 0.1;
     }
 
     h1 {
       position: absolute;
       top: 50%;
       left: 40%;
       color: white;
       font: 40px;
     }

完整代码：是以上两段代码的组合。

  
    
    
    
    
  
  
    
GeeksforGeeks
  

输出：