{"html":"

\n\n

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

\n","css":".card {\n --border: 4px;\n --rounded: 16px;\n --quantity: 12;\n --w-card: 450px;\n --h-card: 400px;\n margin: 0;\n width: var(--w-card);\n height: var(--h-card);\n max-width: 80%;\n max-height: 80%;\n border-radius: var(--rounded);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n padding: var(--border);\n /* box-shadow: 0px 0px 16px 0px #cfecff; */\n}\n.card::before,\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n will-change: auto;\n --size: calc(100%);\n --size-old: calc(100% - calc(var(--border) * 2));\n width: var(--size);\n height: var(--size);\n min-width: var(--size);\n min-height: var(--size);\n max-width: var(--size);\n max-height: var(--size);\n border-radius: var(--rounded);\n background-size: 400% 400%;\n animation: bg-spin 3s linear 0s infinite normal none running;\n background-image: radial-gradient(\n circle farthest-side at 0 100%,\n #00ccb1,\n transparent\n ),\n radial-gradient(circle farthest-side at 100% 0, #5ddcff, transparent),\n radial-gradient(circle farthest-side at 100% 100%, #3c67e3, transparent),\n radial-gradient(circle farthest-side at 0 0, #4e00c2, #0000);\n}\n\n.card::after {\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.5s;\n animation-delay: 0.5s;\n filter: blur(24px);\n opacity: 0.7;\n}\n@keyframes bg-spin {\n 25% {\n background-position: right 20% bottom 40%;\n }\n 75% {\n background-position: left 45% top 20%;\n }\n}\n\n.points_wrapper {\n position: absolute;\n overflow: hidden;\n width: calc(100% - (var(--border) * 4));\n height: calc(100% - (var(--border) * 4));\n border-radius: calc(var(--rounded) - 4px);\n pointer-events: none;\n z-index: 80;\n}\n\n.points_wrapper .point {\n --sz-point: 4px;\n top: -8px;\n position: absolute;\n animation: floating-points infinite ease-in-out;\n pointer-events: none;\n width: var(--sz-point);\n height: var(--sz-point);\n background-color: #5ddcff;\n border-radius: 9999px;\n}\n@keyframes floating-points {\n 0% {\n transform: translate(0, 0);\n }\n 95% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate(calc(var(--h-card) / 1.75), calc(var(--h-card) / 1.5));\n }\n}\n.points_wrapper .point:nth-child(1) {\n left: 10%;\n opacity: 1;\n animation-duration: 2.35s;\n animation-delay: 0.2s;\n}\n.points_wrapper .point:nth-child(2) {\n left: 30%;\n opacity: 0.7;\n animation-duration: 2.5s;\n animation-delay: 0.5s;\n}\n.points_wrapper .point:nth-child(3) {\n left: 25%;\n opacity: 0.8;\n animation-duration: 2.2s;\n animation-delay: 0.1s;\n}\n.points_wrapper .point:nth-child(4) {\n left: 44%;\n opacity: 0.6;\n animation-duration: 2.05s;\n}\n.points_wrapper .point:nth-child(5) {\n left: 50%;\n opacity: 1;\n animation-duration: 1.9s;\n}\n.points_wrapper .point:nth-child(6) {\n left: 75%;\n opacity: 0.5;\n animation-duration: 1.5s;\n animation-delay: 1.5s;\n}\n.points_wrapper .point:nth-child(7) {\n left: 88%;\n opacity: 0.9;\n animation-duration: 2.2s;\n animation-delay: 0.2s;\n}\n.points_wrapper .point:nth-child(8) {\n left: 58%;\n opacity: 0.8;\n animation-duration: 2.25s;\n animation-delay: 0.2s;\n}\n.points_wrapper .point:nth-child(9) {\n left: 98%;\n opacity: 0.6;\n animation-duration: 2.6s;\n animation-delay: 0.1s;\n}\n.points_wrapper .point:nth-child(10) {\n left: 65%;\n opacity: 1;\n animation-duration: 2.5s;\n animation-delay: 0.2s;\n}\n\n.content {\n position: absolute;\n width: calc(100% - (var(--border) * 4));\n height: calc(100% - (var(--border) * 4));\n border-radius: calc(var(--rounded) - 4px);\n overflow: hidden;\n z-index: 7;\n background-color: #191c29;\n}\n"}

wet-mule-82

👁 实时预览

📝 源代码