{"html":"

\n\n\n\n

","css":".card {\n position: relative;\n padding: 10px;\n font: 500 15px / 15px Almohtarif;\n vertical-align: baseline;\n box-sizing: border-box;\n background: #fff;\n border-radius: 8px;\n width: 200px;\n height: 250px;\n z-index: 1;\n transition: all 500ms ease-in-out;\n}\n\n.card::after {\n content: '2022';\n width: 200px;\n height: 35%;\n background-color: blue;\n position: absolute;\n z-index: -1;\n left: 0;\n top: 0;\n display: flex;\n font-size: 30px;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #fff;\n}\n\n.card::before {\n content: 'france';\n color: #fff;\n text-transform: uppercase;\n width: 200px;\n height: 35%;\n background-color: red;\n position: absolute;\n z-index: -1;\n right: 0;\n bottom: 0;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 30px;\n}\n\n.card:hover {\n transform: scale(1.1);\n}\n\n.card svg {\n width: 100px;\n align-items: center;\n display: flex;\n justify-content: center;\n margin-left: auto;\n margin-right: auto;\n}\n"}

quiet-hound-47

👁 实时预览

📝 源代码