{"html":"

\n","css":".grid-wrapper {\n cursor: default;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 300px;\n background: transparent;\n}\n.my-custom-grid-container {\n display: grid;\n grid-template-columns: repeat(5, 50px);\n grid-template-rows: repeat(4, 50px);\n gap: 2px;\n padding: 4px;\n border-radius: 6px;\n box-shadow:\n 0 0 32px inset rgba(255, 255, 255, 0.329),\n 0 0 40px rgba(0, 0, 0, 0.67);\n background: linear-gradient(\n 165deg,\n rgba(0, 0, 0, 1) 0%,\n rgba(171, 0, 0, 1) 75%,\n rgba(255, 244, 0, 1) 100%\n );\n}\n.grid-box {\n cursor: default;\n color: #fff;\n font-size: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n border-radius: 3px;\n transition: all 0.2s ease;\n background: rgba(255, 255, 255, 0.3);\n box-shadow: 0 8px 32px inset rgba(135, 78, 31, 0.37);\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n border: 1px solid rgba(255, 255, 255, 0.18);\n}\n.grid-box:hover {\n transform: scale(1.04);\n box-shadow: 1px 1px 20px inset rgba(135, 55, 31, 0.5);\n}\n.grid-box:nth-child(3):hover {\n transform: scale(1.02);\n font-size: 60px;\n}\n.grid-box:nth-child(8):hover {\n transform: scale(1.02);\n font-size: 60px;\n}\n.grid-box1 {\n grid-column: 1 / 2;\n grid-row: 1 / 2;\n}\n.grid-box2 {\n grid-column: 2 / 2;\n grid-row: 1 / 2;\n}\n.grid-box3 {\n grid-column: 3 / 5;\n grid-row: 1 / 3;\n}\n.grid-box4 {\n grid-column: 5 / 5;\n grid-row: 1 / 2;\n}\n.grid-box5 {\n grid-column: 1 / 2;\n grid-row: 2 / 3;\n}\n.grid-box6 {\n grid-column: 2 / 3;\n grid-row: 2 / 3;\n}\n.grid-box7 {\n grid-column: 5 / 5;\n grid-row: 2 / 3;\n}\n.grid-box8 {\n grid-column: 1 / 3;\n grid-row: 3 / 5;\n}\n.grid-box9 {\n grid-column: 3 / 4;\n grid-row: 3 / 4;\n}\n.grid-box10 {\n grid-column: 4 / 5;\n grid-row: 3 / 4;\n}\n.grid-box11 {\n grid-column: 5 / 5;\n grid-row: 3 / 4;\n}\n.grid-box12 {\n grid-column: 3 / 4;\n grid-row: 4 / 5;\n}\n.grid-box13 {\n grid-column: 4 / 5;\n grid-row: 4 / 5;\n}\n.grid-box14 {\n grid-column: 5 / 5;\n grid-row: 4 / 5;\n}\n"}

little-insect-9

👁 实时预览

📝 源代码