css变量实现一个图文banner幻灯片瀑布式切换效果代码-html代码-BFW代码库

css变量实现一个图文banner幻灯片瀑布式切换效果代码

代码语言：html

所属分类：幻灯片

代码描述：css变量实现一个图文banner幻灯片瀑布式切换效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @charset "UTF-8";
        * {
          margin: 0;
          padding: 0;
          font: inherit;
        }
        
        .grid {
          display: grid;
        }
        
        body {
          min-height: 100vh;
          background: #f2f3f9;
        }
        
        main {
          place-self: center;
          overflow: hidden;
          max-width: 56.25em;
          box-shadow: -16px 16px 23px currentcolor;
          background: #fff;
          color: #b9b7bb;
          font: 1em/1.25 ubuntu, trebuchet ms, sans-serif;
        }
        
        article {
          --not-sel: min(1, max(var(--k) - var(--i), var(--i) - var(--k)));
          --sel: calc(1 - var(--not-sel));
          --sgn-sel: calc(2*var(--sel) - 1);
          --pad: min(1.5em, 5vw);
          grid-area: 1/1;
          grid-auto-flow: column;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 24em), 1fr));
          z-index: var(--sel);
          padding: var(--pad);
          transition: z-index 0s 1s;
        }
        
        a {
          font-size: 0.875em;
          text-decoration: none;
          color: #000;
        }
        a:focus {
          outline: none;
        }
        a:hover, a:focus {
          color: mediumvioletred;
        }
        
        .c--ini {
          grid-column: 1;
        }
        
        .c--fin {
          grid-column-end: -1;
        }
        
        .fade {
          transform: translatey(.........完整代码请登录后点击上方下载按钮下载查看