{"html":"

\n \n \n \n

Alerts users to save their progress before leaving a page

\n","css":"/* Basic reset and styling */\n\n/* Tooltip container */\n.tooltip-container {\n position: relative;\n display: inline-block;\n margin: 20px;\n}\n\n/* Icon styling */\n.icon {\n width: 50px;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition:\n transform 0.3s ease,\n filter 0.3s ease;\n}\n\n/* SVG Animation: Rotate and scale effect */\n.icon svg {\n transition: transform 0.5s ease-in-out;\n}\n\n.icon:hover svg {\n transform: rotate(360deg) scale(1.2);\n}\n\n/* Tooltip styling */\n.tooltip {\n visibility: hidden;\n width: 200px;\n background-color: #333;\n color: #fff;\n text-align: center;\n border-radius: 5px;\n padding: 10px;\n position: absolute;\n bottom: 125%; /* Position above the icon */\n left: 50%;\n margin-left: -100px; /* Center the tooltip */\n opacity: 0;\n transition:\n opacity 0.5s,\n transform 0.5s;\n transform: translateY(10px);\n}\n\n/* Tooltip Arrow */\n.tooltip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #333 transparent transparent transparent;\n}\n\n/* Show tooltip on hover */\n.tooltip-container:hover .tooltip {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n@keyframes bounce {\n 0%,\n 20%,\n 50%,\n 80%,\n 100% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-30px);\n }\n 60% {\n transform: translateY(-15px);\n }\n}\n\n.tooltip-container:hover .tooltip {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n animation: bounce 0.6s ease;\n}\n"}

tasty-cow-19

👁 实时预览

📝 源代码