{"html":"

\n \n

We're on Social Media

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".card {\n --dark: #212121;\n --darker: #111111;\n --semidark: #2c2c2c;\n --lightgray: #e8e8e8;\n --unit: 10px;\n\n background-color: var(--darker);\n box-shadow: 0 0 var(--unit) var(--darker);\n border: calc(var(--unit) / 2) solid var(--darker);\n border-radius: var(--unit);\n position: relative;\n padding: var(--unit);\n overflow: hidden;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n width: 120%;\n height: 20%;\n top: 40%;\n left: -10%;\n background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);\n animation: keyframes-floating-light 2.5s infinite ease-in-out;\n filter: blur(20px);\n}\n\n@keyframes keyframes-floating-light {\n 0% {\n transform: rotate(-5deg) translateY(-5%);\n opacity: 0.5;\n }\n\n 50% {\n transform: rotate(5deg) translateY(5%);\n opacity: 1;\n }\n\n 100% {\n transform: rotate(-5deg) translateY(-5%);\n opacity: 0.5;\n }\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0%;\n left: 0%;\n background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);\n filter: blur(20px);\n pointer-events: none;\n animation: keyframes-intro 1s ease-in forwards;\n}\n\n@keyframes keyframes-intro {\n 100% {\n ransform: translate(-100%);\n opacity: 0;\n }\n}\n\n.card .image {\n width: 200px;\n animation: keyframes-floating-img 10s ease-in-out infinite;\n}\n\n@keyframes keyframes-floating-img {\n 0% {\n transform: translate(-2%, 2%) scaleY(0.95) rotate(-5deg);\n }\n\n 50% {\n transform: translate(2%, -2%) scaleY(1) rotate(5deg);\n }\n\n 100% {\n transform: translate(-2%, 2%) scaleY(0.95) rotate(-5deg);\n }\n}\n\n.card .heading {\n font-weight: 600;\n font-size: small;\n text-align: center;\n margin-top: calc(var(--unit) * -2);\n padding-block: var(--unit);\n color: var(--lightgray);\n animation: keyframes-flash-text 0.5s infinite;\n}\n\n@keyframes keyframes-flash-text {\n 50% {\n opacity: 0.5;\n }\n}\n\n.card .icons {\n display: flex;\n gap: var(--unit);\n}\n\n.card .icons a {\n display: flex;\n flex-grow: 1;\n align-items: center;\n justify-content: center;\n background-color: var(--dark);\n color: var(--lightgray);\n padding: calc(var(--unit) / 2);\n border-radius: calc(var(--unit) / 2);\n}\n\n.card .icons a:hover {\n transition: 0.2s;\n background-color: var(--semidark);\n}\n"}

giant-newt-7

👁 实时预览

📝 源代码