{"html":"

NOU

\n \n

\n","css":".card-container {\n perspective: 800px;\n}\n\n.card {\n position: relative;\n width: 210px;\n height: 332px;\n background: #fffffd;\n border-radius: 1em;\n box-shadow: 0 0 6px -4px black;\n transition: 0.75s all;\n transform-style: preserve-3d;\n pointer-events: none;\n user-select: none;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n bottom: -24px;\n bottom: 0;\n left: 0;\n width: 210px;\n height: 110px;\n transform: translate(0em, 60%) rotateX(90deg) scale(0.8);\n border-radius: 100%;\n background-color: #000a;\n z-index: -10;\n filter: blur(24px);\n}\n\n.card-container:hover .card {\n transform: rotateY(180deg);\n}\n\n.back {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n inset: 0.7em;\n border-radius: 1.25em;\n background: #191f1f;\n overflow: hidden;\n}\n\n.red {\n position: absolute;\n background: #cb0323;\n inset: 0;\n border-radius: 100%;\n transform-origin: center;\n transform: scale(0.875) skewX(-22.5deg);\n}\n\n.back .text {\n position: absolute;\n font-size: 5em;\n font-weight: 800;\n color: #e4c713;\n transform-origin: center;\n transform: rotate(-15deg) translateX(5px);\n text-shadow:\n 2px 2px #f1e8ad,\n 2px 1px #f1e8ad,\n 2px 0px #f1e8ad,\n 2px -1px #f1e8ad,\n 2px -2px #f1e8ad,\n 1px -2px #f1e8ad,\n 0px -2px #f1e8ad,\n -1px -2px #f1e8ad,\n -2px -2px #f1e8ad,\n -2px -1px #f1e8ad,\n -2px 0px #f1e8ad,\n -2px 1px #f1e8ad,\n -2px 2px #f1e8ad,\n -12px 10px #191f1f,\n -10px 10px #191f1f,\n -9px 9.428571429px #191f1f,\n -8px 8.857142857px #191f1f,\n -7px 8.285714286px #191f1f,\n -6px 7.714285714px #191f1f,\n -5px 7.142857143px #191f1f,\n -4px 6.571428572px #191f1f,\n -3px 6px #191f1f,\n -2px 5.428571429px #191f1f,\n -1px 4.857142857px #191f1f,\n 0px 4.285714286px #191f1f,\n 1px 3.714285715px #191f1f,\n 2px 3.142857143px #191f1f,\n 3px 2.571428572px #191f1f,\n 4px 2px #191f1f,\n 4px -4px #191f1f,\n -4px -4px #191f1f,\n -5px -3px #191f1f,\n -6px -2px #191f1f,\n -7px -1px #191f1f,\n -8px 0px #191f1f,\n -9px 1px #191f1f,\n -10px 2px #191f1f,\n -11px 3px #191f1f,\n -12px 4px #191f1f,\n -14px 4px #fffffd,\n -13px 3px #fffffd,\n -12px 2px #fffffd,\n -11px 1px #fffffd,\n -10px 0px #fffffd,\n -9px -1px #fffffd,\n -8px -2px #fffffd,\n -7px -3px #fffffd,\n -6px -4px #fffffd,\n -5px -5px #fffffd,\n -4px -6px #fffffd,\n -3px -6px #fffffd,\n 0px -6px #fffffd,\n 3px -6px #fffffd,\n 6px -6px #fffffd,\n -14px 12px #fffffd,\n -8px 12px #fffffd,\n -7px 11.5px #fffffd,\n -6px 11px #fffffd,\n -5px 10.5px #fffffd,\n -4px 10px #fffffd,\n -3px 9.5px #fffffd,\n -2px 9px #fffffd,\n -1px 8.5px #fffffd,\n 0px 8px #fffffd,\n 1px 7.5px #fffffd,\n 2px 7px #fffffd,\n 3px 6.5px #fffffd,\n 4px 6px #fffffd,\n 5px 5.5px #fffffd,\n 6px 4px #fffffd;\n}\n\n.front {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n inset: 0.7em;\n border-radius: 1.25em;\n background: #cb0323;\n overflow: hidden;\n transform: rotateY(180deg);\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n}\n\n.front .red {\n border: 0.7em solid #fffffd;\n transform: scale(0.92, 0.875) skewX(-22.5deg);\n}\n\n.text-center {\n position: absolute;\n width: 12em;\n color: white;\n}\n\n.text-top {\n position: absolute;\n top: -1em;\n left: -1.25em;\n width: 7em;\n color: white;\n}\n\n.text-bottom {\n position: absolute;\n bottom: -1em;\n right: -1.5em;\n width: 7em;\n color: white;\n}\n"}

tough-stingray-70

👁 实时预览

📝 源代码

🔗 相关联的样式