{"html":"

\n \n

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

\n","css":".card {\n position: relative;\n width: 300px;\n height: 200px;\n background-color: #f2f2f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n perspective: 1000px;\n box-shadow: 0 0 0 5px #ffffff80;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card svg {\n width: 48px;\n fill: #333;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);\n}\n\n.card__content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 20px;\n box-sizing: border-box;\n background-color: #f2f2f2;\n transform: rotateX(-90deg);\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover .card__content {\n transform: rotateX(0deg);\n}\n\n.card__title {\n margin: 0;\n font-size: 24px;\n color: #333;\n font-weight: 700;\n}\n\n.card:hover svg {\n scale: 0;\n}\n\n.card__description {\n margin: 10px 0 0;\n font-size: 14px;\n color: #777;\n line-height: 1.4;\n}\n"}

selfish-owl-57

👁 实时预览

📝 源代码

🔗 相关联的样式