css过渡颜色竖条背景效果代码-html代码-BFW代码库

css过渡颜色竖条背景效果代码

代码语言：html

所属分类：背景

代码描述：css过渡颜色竖条背景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>

        html,
        body {
          height: 100%;
        }
        
        body {
          margin: 0;
          display: flex;
        }
        
        div {
          flex-grow: 1;
        }
        
        @media (max-width: 500px) {
          body {
            flex-direction: column;
          }
        }
        body div:nth-child(1) {
          --current: #8ecae6;
        }
        body div:nth-child(2) {
          --current: #7cc3df;
        }
        body div:nth-child(3) {
          --current: #6abbd8;
        }
        body div:nth-child(4) {
          --current: #58b4d1;
        }
        body div:nth-child(5) {
          --current: #45adca;
        }
        body div:nth-child(6) {
          --current: #33a5c3;
        }
        body div:nth-child(7) {
          --current: #219ebc;
        }
        body div:nth-child(8) {
          --current: #46a29d;
        }
        body div:nth-child(9) {
          --current: #6ba67e;
        }
        body div:nth-child(10) {
          --current: #90ab60;
        }
        body div:nth-child(11) {
          --current: #b5af41;
        }
        body div:nth-child(12) {
          --curren.........完整代码请登录后点击上方下载按钮下载查看