css+div实现grid字体文字效果代码-html代码-BFW代码库

css+div实现grid字体文字效果代码

代码语言：html

代码描述：css+div实现grid字体文字效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --c1: 1fr;
          --c2: 1fr;
          --c3: 8fr;
          --r1: 1fr;
          --r2: 1fr;
          --r3: 2fr;
          --fillX: 40%;
          --fillY: 20%;
        }
        
        body {
          display: grid;
          gap: 16px;
          grid-auto-flow: column;
          justify-content: center;
          align-items: center;
          height: 90vh;
        }
        
        .grid {
          display: grid;
          grid-template-columns: var(--c1) var(--c2) var(--c3);
          grid-template-rows: var(--r1) var(--r2) var(--r3);
          width: 64px;
          height: 64px;
        }
        
        .cell {
          background: black;
          position: relative;
        }
        .cell.top {
          height: var(--fillY);
        }
        .cell.bottom {
          top: calc(100% - var(--fillY));
          height: var(--fillY);
        }
        .cell.left {
          width: var(--fillX);
        }
        .cell.empty {
          height: 0%;
        }
    </style>



</head>

<body>
    <!-- H -->
    <div class="grid">
        <div class="cell"></div>
        <div class="cell empty"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell top"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell empty"></div>
        <div class="cell"></div>
    </div>

    <!-- E -->
    <div class="grid">
        <div class="cell"></div>
        <div class="cell top"></div>
        <div class="cell top"></div>
        <div class="cell"></div>
        &.........完整代码请登录后点击上方下载按钮下载查看