{"html":"

\n \n

\n ⭐\n ⭐\n ⭐\n Woohoo! You found the secret message! Keep being awesome! 🚀\n

\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n background: linear-gradient(135deg, #ff7eb3, #ffd700);\n font-family: \"Poppins\", sans-serif;\n color: #333333;\n}\n\n.tooltip-wrapper {\n position: relative;\n display: inline-block;\n}\n\n.hover-me {\n padding: 15px 25px;\n background: #6a5acd;\n color: white;\n border: none;\n border-radius: 25px;\n cursor: pointer;\n font-size: 18px;\n transition:\n transform 0.3s,\n background 0.3s;\n font-family: \"Montserrat\", sans-serif;\n}\n\n.hover-me:hover {\n transform: scale(1.1);\n background: #9370db;\n}\n\n.tooltip {\n visibility: hidden;\n position: absolute;\n bottom: 150%;\n left: 50%;\n transform: translateX(-50%);\n background: #ffffff;\n color: #6a5acd;\n padding: 15px;\n border-radius: 10px;\n font-size: 16px;\n width: 220px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n animation: bounce 0.6s infinite alternate;\n font-family: \"Roboto\", sans-serif;\n}\n\n.tooltip::before {\n content: \"\";\n position: absolute;\n bottom: -20px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 10px;\n border-style: solid;\n border-color: white transparent transparent transparent;\n}\n\n.tooltip::after {\n content: \"POW!\";\n position: absolute;\n top: -25px;\n right: -25px;\n background: #ff6347;\n color: white;\n padding: 8px 12px;\n border-radius: 50%;\n font-weight: bold;\n font-size: 14px;\n transform: rotate(15deg);\n font-family: \"Comic Neue\", cursive;\n}\n\n.tooltip-wrapper:hover .tooltip {\n visibility: visible;\n}\n\n@keyframes bounce {\n from {\n transform: translateX(-50%) translateY(0px);\n }\n to {\n transform: translateX(-50%) translateY(-10px);\n }\n}\n\n/* Star decoration */\n.star {\n position: absolute;\n color: #ffd700;\n animation: twinkle 1s infinite alternate;\n}\n\n.star:nth-child(1) {\n top: -10px;\n left: 10px;\n}\n.star:nth-child(2) {\n top: 10px;\n right: 10px;\n}\n.star:nth-child(3) {\n bottom: -10px;\n left: 30px;\n}\n\n@keyframes twinkle {\n from {\n opacity: 0.4;\n }\n to {\n opacity: 1;\n }\n}\n"}

tidy-dragon-72

👁 实时预览

📝 源代码