{"html":"

Card

This is a subtitle

\n \n

","css":".card {\n width: 240px;\n height: 354px;\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n animation: name-of-animation 2s;\n}\n\n.card-img {\n position: absolute;\n height: 100%;\n width: 100%;\n background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);\n}\n\n.card-info {\n position: absolute;\n width: 100%;\n bottom: 0;\n padding: 1.7rem;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n}\n\n.card-icon {\n opacity: 0;\n transform: translateX(-20%);\n width: 2em;\n height: 2em;\n transition: all .3s ease-in-out;\n position: relative;\n left: -0.1em;\n top: -3px;\n}\n\n.icon {\n --size: 28px;\n width: var(--size);\n height: var(--size);\n filter: invert(1);\n margin-top: 1px;\n margin-left: -5px;\n}\n\n.card-text p {\n line-height: 140%;\n white-space: nowrap;\n}\n\n.text-title {\n font-weight: 700;\n font-size: 2.1rem;\n color: rgb(255, 255, 255);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.text-subtitle {\n color: rgb(255, 255, 255);\n font-weight: 500;\n font-size: 1.2rem;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card:hover .card-icon {\n opacity: 1;\n transform: translateX(20%);\n}\n\n@keyframes name-of-animation {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}"}

big-donkey-48

👁 实时预览

📝 源代码