{"html":"\n \n \n\n

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

\n\n","css":"@import url(\"s://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap\");\n\n.scene {\n position: relative;\n width: 240px;\n height: 240px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: \"DM Mono\", monospace;\n cursor: pointer;\n}\n\n.share-toggle {\n display: none;\n}\n\n.share-btn {\n position: relative;\n width: 52px;\n height: 52px;\n border-radius: 16px;\n background: #1a1a1f;\n border: 1px solid rgba(255, 255, 255, 0.08);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);\n z-index: 10;\n}\n\n.share-btn svg {\n fill: rgba(255, 255, 255, 0.5);\n transition: all 0.3s ease;\n}\n\n.share-toggle:checked ~ .share-btn {\n background: #22222a;\n border-color: rgba(120, 90, 255, 0.4);\n box-shadow:\n 0 0 0 4px rgba(120, 90, 255, 0.1),\n 0 8px 32px rgba(0, 0, 0, 0.4);\n transform: scale(1.05);\n}\n\n.share-toggle:checked ~ .share-btn svg {\n fill: rgba(255, 255, 255, 0.9);\n filter: drop-shadow(0 0 6px rgba(120, 90, 255, 0.6));\n}\n\n.share-btn::before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 17px;\n border: 1px solid rgba(120, 90, 255, 0);\n transition: all 0.4s ease;\n pointer-events: none;\n}\n\n.share-toggle:checked ~ .share-btn::before {\n border-color: rgba(120, 90, 255, 0.3);\n inset: -6px;\n border-radius: 22px;\n}\n\n.icon-close {\n display: none;\n}\n.share-toggle:checked ~ .share-btn .icon-share {\n display: none;\n}\n.share-toggle:checked ~ .share-btn .icon-close {\n display: block;\n fill: rgba(255, 255, 255, 0.6);\n}\n\n.orbit-ring {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n\n.social-node {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 42px;\n height: 42px;\n border-radius: 13px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.3);\n transition:\n opacity 0.35s ease,\n transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),\n background 0.2s ease,\n box-shadow 0.2s ease;\n border: 1px solid rgba(255, 255, 255, 0.06);\n}\n\n.share-toggle:checked ~ .orbit-ring {\n pointer-events: all;\n}\n.share-toggle:checked ~ .orbit-ring .social-node {\n opacity: 1;\n}\n\n.n1 {\n --tx: 0px;\n --ty: -88px;\n}\n.n2 {\n --tx: 62px;\n --ty: -62px;\n}\n.n3 {\n --tx: 88px;\n --ty: 0px;\n}\n.n4 {\n --tx: 62px;\n --ty: 62px;\n}\n.n5 {\n --tx: 0px;\n --ty: 88px;\n}\n.n6 {\n --tx: -62px;\n --ty: 62px;\n}\n.n7 {\n --tx: -88px;\n --ty: 0px;\n}\n.n8 {\n --tx: -62px;\n --ty: -62px;\n}\n\n.share-toggle:checked ~ .orbit-ring .n1 {\n transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);\n transition-delay: 0ms;\n}\n.share-toggle:checked ~ .orbit-ring .n2 {\n transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);\n transition-delay: 30ms;\n}\n.share-toggle:checked ~ .orbit-ring .n3 {\n transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);\n transition-delay: 55ms;\n}\n.share-toggle:checked ~ .orbit-ring .n4 {\n transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);\n transition-delay: 80ms;\n}\n.share-toggle:checked ~ .orbit-ring .n5 {\n transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);\n transition-delay: 100ms;\n}\n.share-toggle:checked ~ .orbit-ring .n6 {\n transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);\n transition-delay: 80ms;\n}\n.share-toggle:checked ~ .orbit-ring .n7 {\n transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);\n transition-delay: 55ms;\n}\n.share-toggle:checked ~ .orbit-ring .n8 {\n transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);\n transition-delay: 30ms;\n}\n\n.n1 {\n background: rgba(120, 90, 255, 0.12);\n}\n.n1 svg {\n fill: #a07aff;\n}\n.n1:hover {\n background: #7c5cbf;\n box-shadow: 0 4px 20px rgba(120, 90, 255, 0.45);\n}\n.n1:hover svg {\n fill: #fff;\n}\n\n.n2 {\n background: rgba(4, 98, 223, 0.12);\n}\n.n2 svg {\n fill: #4f8ef7;\n}\n.n2:hover {\n background: #0462df;\n box-shadow: 0 4px 20px rgba(4, 98, 223, 0.4);\n}\n.n2:hover svg {\n fill: #fff;\n}\n\n.n3 {\n background: rgba(37, 211, 102, 0.12);\n}\n.n3 svg {\n fill: #25d366;\n}\n.n3:hover {\n background: #25d366;\n box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);\n}\n.n3:hover svg {\n fill: #fff;\n}\n\n.n4 {\n background: rgba(88, 101, 242, 0.12);\n}\n.n4 svg {\n fill: #8c9eff;\n}\n.n4:hover {\n background: #5865f2;\n box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);\n}\n.n4:hover svg {\n fill: #fff;\n}\n\n.n5 {\n background: rgba(255, 69, 0, 0.12);\n}\n.n5 svg {\n fill: #ff6534;\n}\n.n5:hover {\n background: #ff4500;\n box-shadow: 0 4px 20px rgba(255, 69, 0, 0.4);\n}\n.n5:hover svg {\n fill: #fff;\n}\n\n.n6 {\n background: rgba(225, 48, 108, 0.12);\n}\n.n6 svg {\n fill: #e1306c;\n}\n.n6:hover {\n background: linear-gradient(\n 135deg,\n #f09433,\n #e6683c,\n #dc2743,\n #cc2366,\n #bc1888\n );\n box-shadow: 0 4px 20px rgba(225, 48, 108, 0.4);\n}\n.n6:hover svg {\n fill: #fff;\n}\n\n.n7 {\n background: rgba(255, 252, 0, 0.08);\n}\n.n7 svg {\n fill: #fffc00;\n}\n.n7:hover {\n background: #fffc00;\n box-shadow: 0 4px 20px rgba(255, 252, 0, 0.35);\n}\n.n7:hover svg {\n fill: #000;\n}\n\n.n8 {\n background: rgba(189, 8, 28, 0.12);\n}\n.n8 svg {\n fill: #e60023;\n}\n.n8:hover {\n background: #e60023;\n box-shadow: 0 4px 20px rgba(189, 8, 28, 0.4);\n}\n.n8:hover svg {\n fill: #fff;\n}\n\n.social-node::after {\n content: attr(data-label);\n position: absolute;\n bottom: -22px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 9px;\n letter-spacing: 0.05em;\n color: rgba(255, 255, 255, 0.28);\n white-space: nowrap;\n opacity: 0;\n transition: opacity 0.15s ease;\n pointer-events: none;\n}\n.social-node:hover::after {\n opacity: 1;\n color: rgba(255, 255, 255, 0.65);\n}\n"}

horrible-rattlesnake-47

👁 实时预览

📝 源代码