{"html":"\n","css":".share-btn-wrapper {\n position: relative;\n padding: 3px;\n border-radius: 999px;\n background: linear-gradient(135deg, #93a1f8, #0f1f8b);\n cursor: pointer;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n border: none;\n outline: none;\n}\n\n.share-btn-wrapper:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 30px -8px rgba(77, 62, 226, 0.5);\n}\n\n.share-btn-wrapper:active {\n transform: translateY(-1px) scale(0.98);\n box-shadow: 0 8px 16px -4px rgba(77, 62, 226, 0.4);\n}\n\n.share-inner {\n position: relative;\n width: 240px;\n height: 60px;\n background: linear-gradient(to bottom, #ffffff, #fafafa);\n border-radius: 999px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.hover-panel {\n position: absolute;\n top: 0;\n right: 0;\n width: calc(100% - 28px);\n height: 100%;\n background: linear-gradient(90deg, #4d3ee2, #2c1fab);\n border-radius: 999px;\n transform: translateX(105%);\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);\n z-index: 1;\n}\n\n.share-btn-wrapper:hover .hover-panel {\n transform: translateX(0);\n}\n\n.share-text {\n position: absolute;\n font-size: 20px;\n font-weight: 800;\n letter-spacing: 0.5px;\n color: #3528b9;\n z-index: 2;\n transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.share-btn-wrapper:hover .share-text {\n transform: translateX(-40px);\n opacity: 0;\n}\n\n.social-icons {\n position: absolute;\n top: 0;\n right: 0;\n width: calc(100% - 28px);\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n z-index: 3;\n transform: translateX(40px);\n opacity: 0;\n transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);\n pointer-events: none;\n}\n\n.share-btn-wrapper:hover .social-icons {\n transform: translateX(0);\n opacity: 1;\n pointer-events: auto;\n transition-delay: 0.05s;\n}\n\n.social-icons svg {\n width: 20px;\n height: 20px;\n fill: none;\n stroke: #ffffff;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition:\n transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),\n opacity 0.2s ease;\n cursor: pointer;\n}\n\n.social-icons svg:hover {\n transform: scale(1.2) translateY(-2px);\n opacity: 0.9;\n}\n"}

rotten-earwig-27

👁 实时预览

📝 源代码