{"html":"

\n Create your own designs.\n Find creative elements.\n Participate in challenges.\n UIVERSE\n

\n","css":".tooltip-container {\n position: relative;\n background: #f80254;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n padding: 14px 26px;\n border-radius: 5px;\n text-align: center;\n box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.62),\n inset 0px -2px 3px rgba(0, 0, 0, 0.48), inset 1px 1px 4px #ffffff,\n rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,\n rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n color: #fff;\n}\n\n.tooltip-1,\n.tooltip-2,\n.tooltip-3 {\n position: absolute;\n transform: translateX(-50%);\n font-weight: 800;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n border-radius: 8px 8px 8px 8px;\n background: #ffdb0f;\n box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.62),\n inset 0px -2px 3px rgba(0, 0, 0, 0.48), inset 1px 1px 4px #ffffff,\n rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,\n rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;\n min-width: 180px;\n padding: 8px;\n color: #ac0039;\n font-size: 11px;\n}\n.tooltip-1 {\n top: 0%;\n left: 50%;\n width: 200px;\n}\n.tooltip-2 {\n left: 100%;\n}\n\n.tooltip-3 {\n left: 0;\n}\n.tooltip-container:hover .tooltip-1 {\n top: -100%;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n.tooltip-container:hover .tooltip-2 {\n left: -100%;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n.tooltip-container:hover .tooltip-3 {\n left: 200%;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n"}

cold-chicken-82

👁 实时预览

📝 源代码