{"html":"

\n \n \n \n \n

\n \n Card Title\n

Using Lorem ipsum to focus attention on graphic elements in a webpage design proposal ·

\n \n

","css":".card {\n --card-color: #0080ff;\n --blub-color: #52d4eb;\n position: relative;\n user-select: none;\n}\n\n@keyframes keyframes-rotate-blubs {\n 0% {\n transform: translate(10px) rotate(360deg);\n }\n\n 50% {\n transform: translate(-5px, 10px) rotate(180deg);\n }\n\n 100% {\n transform: translate(10px) rotate(0deg);\n }\n}\n\n.card span {\n width: 100px;\n height: 100px;\n position: absolute;\n background: linear-gradient(0deg, transparent, var(--blub-color));\n border-radius: 100%;\n opacity: 0.5;\n animation: keyframes-rotate-blubs 4s infinite linear;\n}\n\n.card span:nth-child(1) {\n top: -5%;\n left: -5%;\n width: 60px;\n height: 60px;\n animation-delay: .1s;\n opacity: 0.3;\n}\n\n.card span:nth-child(2) {\n top: 60%;\n left: -20%;\n width: 80px;\n height: 80px;\n animation-delay: .2s;\n opacity: 0.3;\n}\n\n.card span:nth-child(3) {\n top: 10%;\n left: 60%;\n animation-delay: .3s;\n opacity: 0.6;\n}\n\n.card span:nth-child(4) {\n top: 70%;\n left: 50%;\n width: 90px;\n height: 90px;\n animation-delay: .4s;\n opacity: 0.4;\n}\n\n.card div {\n backdrop-filter: blur(15px);\n outline: 1px solid var(--card-color);\n color: var(--card-color);\n width: 180px;\n height: 250px;\n border-radius: 5%;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.card div .check {\n fill: var(--card-color);\n width: 25px;\n height: 25px;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n}\n\n.card div strong {\n font-size: 1rem;\n font-weight: 900;\n text-transform: uppercase;\n}\n\n.card div p {\n font-size: 0.8rem;\n}\n\n.card div hr {\n border: none;\n border-top: 1px solid var(--card-color);\n opacity: .5;\n}\n\n.card div button {\n background-color: transparent;\n color: var(--card-color);\n border: none;\n outline: 1px solid var(--card-color);\n border-radius: 1rem;\n padding: .5rem 1rem;\n font-size: 0.8rem;\n font-weight: 900;\n transition: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n text-transform: uppercase;\n gap: .2em;\n}\n\n.card div button .arrow {\n width: 0px;\n height: 20px;\n fill: var(--blub-color);\n transform: scale(0);\n transition: .3s;\n}\n\n.card div button:hover .arrow {\n width: 20px;\n margin-left: 1em;\n transform: scale(1);\n}\n\n.card div button:hover {\n background-color: var(--card-color);\n color: var(--blub-color);\n cursor: pointer;\n}"}

unlucky-bat-4

👁 实时预览

📝 源代码