{"html":"

\n \n \n

\n","css":".card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 300px;\n height: 360px;\n padding: 32px;\n border-radius: 24px;\n overflow: hidden;\n line-height: 1.6;\n border: 1px solid #cccccc;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: space-between;\n gap: 8px;\n color: #000000;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.content .quotes {\n width: 48px;\n height: 48px;\n}\n\n.content .footer {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n}\n\n.content .para {\n z-index: 1;\n opacity: 0.8;\n font-size: 16px;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.card:hover {\n box-shadow: 8px 8px #0a3cff;\n border-color: #0a3cff;\n transform: translate(-8px, -8px);\n}\n\n.button {\n position: relative;\n font-family: inherit;\n border: none;\n background-color: transparent;\n font-size: 16px;\n padding: 4px 0px;\n font-weight: 700;\n line-height: 1.6;\n color: #000000;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 1;\n}\n\n.button span {\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.button::before {\n position: absolute;\n content: \"\";\n width: 112%;\n height: 1px;\n left: 0%;\n bottom: 0%;\n background: #0a3cff;\n pointer-events: none;\n margin: auto;\n transition: transform 0.64s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: -1;\n transform: scaleX(0);\n transform-origin: right;\n}\n\n.button:hover::before {\n transform: scaleX(1);\n transform-origin: left;\n}\n\n.button:active {\n scale: 0.95;\n}\n"}

tidy-termite-70

👁 实时预览

📝 源代码