{"html":"

A♠

♠

A♠

\n\n

\n","css":".card-wrapper {\n --black: #000000;\n --white: #ffffff;\n --card-border: #222222;\n\n width: 250px;\n height: 350px;\n perspective: 1200px;\n position: relative;\n margin: 20px auto;\n font-family: sans-serif;\n}\n\n.card-wrapper .card {\n width: 100%;\n height: 100%;\n position: relative;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n transform-style: preserve-3d;\n cursor: pointer;\n}\n\n.card-wrapper .card.is-flipped {\n transform: rotateY(180deg);\n}\n\n.card-wrapper .card-face {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 15px;\n backface-visibility: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n border: 2px solid var(--card-border);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n}\n\n.card-wrapper .card-front {\n background-color: var(--white);\n color: var(--black);\n}\n\n.card-wrapper .card-back {\n background-color: var(--black);\n transform: rotateY(180deg);\n border: 2px solid var(--white);\n outline: 2px solid var(--black);\n position: relative;\n overflow: hidden;\n}\n\n.card-wrapper .pattern {\n width: 90%;\n height: 94%;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n background-image: linear-gradient(\n 45deg,\n rgba(215, 22, 22, 0.389) 25%,\n transparent 25%\n ),\n linear-gradient(-45deg, rgba(167, 68, 68, 0.3) 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.3) 75%),\n linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.4) 100%);\n background-size: 20px 20px;\n background-position:\n 0 0,\n 0 10px,\n 10px 10px,\n -10px 0px;\n}\n\n.card-wrapper .corner {\n position: absolute;\n font-size: 28px;\n font-weight: bold;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.card-wrapper .top-left {\n top: 15px;\n left: 15px;\n}\n\n.card-wrapper .bottom-right {\n bottom: 15px;\n right: 15px;\n transform: rotate(180deg);\n}\n\n.card-wrapper .center-suit {\n font-size: 120px;\n}\n"}

proud-wasp-68

👁 实时预览

📝 源代码