{"html":"

\n Share\n

\n \n

\n","css":"/* Container Styles */\n.tooltip-container {\n position: relative;\n display: inline-block;\n font-family: \"Arial\", sans-serif;\n overflow: visible;\n}\n\n/* Button Styles */\n.button-content {\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #6e8efb, #a777e3);\n color: white;\n padding: 14px 28px;\n border-radius: 50px;\n cursor: pointer;\n transition:\n background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\n transform 0.3s ease,\n box-shadow 0.4s ease;\n box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n overflow: hidden;\n}\n\n.button-content::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: linear-gradient(\n 135deg,\n rgba(110, 142, 251, 0.4),\n rgba(167, 119, 227, 0.4)\n );\n filter: blur(15px);\n opacity: 0;\n transition: opacity 0.5s ease;\n z-index: -1;\n}\n\n.button-content::after {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.3) 0%,\n rgba(255, 255, 255, 0) 70%\n );\n transform: scale(0);\n transition: transform 0.6s ease-out;\n z-index: -1;\n}\n\n.button-content:hover::before {\n opacity: 1;\n}\n\n.button-content:hover::after {\n transform: scale(1);\n}\n\n.button-content:hover {\n background: linear-gradient(135deg, #a777e3, #6e8efb);\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);\n transform: translateY(-4px) scale(1.03);\n}\n\n.button-content:active {\n transform: translateY(-2px) scale(0.98);\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);\n}\n\n.text {\n font-size: 18px;\n font-weight: 600;\n margin-right: 12px;\n white-space: nowrap;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n transition: letter-spacing 0.3s ease;\n}\n\n.button-content:hover .text {\n letter-spacing: 1px;\n}\n\n.share-icon {\n fill: white;\n transition:\n transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),\n fill 0.3s ease;\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));\n}\n\n.button-content:hover .share-icon {\n transform: rotate(180deg) scale(1.1);\n fill: #ffffff;\n}\n\n/* Tooltip Styles */\n.tooltip-content {\n position: absolute;\n top: 102%;\n left: 50%;\n transform: translateX(-50%) scale(0.8);\n background: white;\n border-radius: 15px;\n padding: 22px;\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),\n transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),\n visibility 0.5s ease;\n z-index: 100;\n pointer-events: none;\n backdrop-filter: blur(10px);\n background: rgba(255, 255, 255, 0.9);\n}\n\n.tooltip-container:hover .tooltip-content {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) scale(1);\n pointer-events: auto;\n}\n\n/* Social Icons Styles */\n.social-icons {\n display: flex;\n justify-content: space-between;\n gap: 12px;\n}\n\n.social-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: #f0f0f0;\n transition:\n transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),\n background 0.3s ease,\n box-shadow 0.4s ease;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n position: relative;\n overflow: hidden;\n}\n\n.social-icon::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle at center,\n rgba(255, 255, 255, 0.8) 0%,\n rgba(255, 255, 255, 0) 70%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.social-icon:hover::before {\n opacity: 1;\n}\n\n.social-icon svg {\n width: 24px;\n height: 24px;\n fill: #333;\n transition:\n transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),\n fill 0.3s ease;\n z-index: 1;\n}\n\n.social-icon:hover {\n transform: translateY(-5px) scale(1.1);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\n}\n\n.social-icon:active {\n transform: translateY(-2px) scale(1.05);\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n}\n\n.social-icon:hover svg {\n transform: scale(1.2);\n fill: white;\n}\n\n.social-icon.twitter:hover {\n background: linear-gradient(135deg, #1da1f2, #1a91da);\n}\n\n.social-icon.facebook:hover {\n background: linear-gradient(135deg, #1877f2, #165ed0);\n}\n\n.social-icon.linkedin:hover {\n background: linear-gradient(135deg, #0077b5, #005e94);\n}\n\n/* Animation for Pulse Effect */\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.4);\n }\n 70% {\n box-shadow: 0 0 0 20px rgba(110, 142, 251, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(110, 142, 251, 0);\n }\n}\n\n.button-content {\n animation: pulse 3s infinite;\n}\n\n/* Hover Ripple Effect */\n@keyframes ripple {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(4);\n opacity: 0;\n }\n}\n\n.button-content::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.3);\n border-radius: inherit;\n transform: scale(0);\n opacity: 0;\n}\n\n.button-content:active::before {\n animation: ripple 0.6s linear;\n}\n\n/* Tooltip Arrow */\n.tooltip-content::before {\n content: \"\";\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 0 10px 10px 10px;\n border-style: solid;\n border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;\n filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.1));\n}\n\n/* Accessibility */\n.button-content:focus {\n outline: none;\n box-shadow:\n 0 0 0 3px rgba(110, 142, 251, 0.5),\n 0 8px 15px rgba(0, 0, 0, 0.1);\n}\n\n.button-content:focus:not(:focus-visible) {\n box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .button-content {\n padding: 12px 24px;\n border-radius: 40px;\n }\n\n .text {\n font-size: 16px;\n }\n\n .tooltip-content {\n width: 240px;\n padding: 18px;\n }\n\n .social-icon {\n width: 44px;\n height: 44px;\n }\n\n .social-icon svg {\n width: 20px;\n height: 20px;\n }\n}\n\n@media (max-width: 480px) {\n .button-content {\n padding: 10px 20px;\n }\n\n .text {\n font-size: 14px;\n }\n\n .tooltip-content {\n width: 200px;\n padding: 15px;\n }\n\n .social-icon {\n width: 40px;\n height: 40px;\n }\n\n .social-icon svg {\n width: 18px;\n height: 18px;\n }\n}\n\n/* Dark Mode Support */\n@media (prefers-color-scheme: dark) {\n .tooltip-content {\n background: rgba(30, 30, 30, 0.9);\n color: white;\n }\n\n .tooltip-content::before {\n border-color: transparent transparent rgba(30, 30, 30, 0.9) transparent;\n }\n\n .social-icon {\n background: #2a2a2a;\n }\n\n .social-icon svg {\n fill: #e0e0e0;\n }\n}\n\n/* Print Styles */\n@media print {\n .tooltip-container {\n display: none;\n }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n .button-content,\n .share-icon,\n .social-icon,\n .tooltip-content {\n transition: none;\n }\n\n .button-content {\n animation: none;\n }\n}\n\n/* Custom Scrollbar for Tooltip Content */\n.tooltip-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.tooltip-content::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 3px;\n}\n\n.tooltip-content::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 3px;\n}\n\n.tooltip-content::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n"}

hard-starfish-64

👁 实时预览

📝 源代码