{"html":"

\n Hello, I'm a toast.. hold click.\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".tooltip-container {\n --fx: #d19d9d;\n --accent: #587676;\n --background: #dcd1a9;\n --darker: #8c782f;\n --xtip: 50%;\n --dist: -2.5em;\n --xdist: -55%;\n --deg: -5deg;\n --linear: linear(\n 0,\n 0.009,\n 0.035 2.1%,\n 0.141,\n 0.281 6.7%,\n 0.723 12.9%,\n 0.938 16.7%,\n 1.017,\n 1.077,\n 1.121,\n 1.149 24.3%,\n 1.159,\n 1.163,\n 1.161,\n 1.154 29.9%,\n 1.129 32.8%,\n 1.051 39.6%,\n 1.017 43.1%,\n 0.991,\n 0.977 51%,\n 0.974 53.8%,\n 0.975 57.1%,\n 0.997 69.8%,\n 1.003 76.9%,\n 1.004 83.8%,\n 1\n );\n --elastic-easing: linear(\n 0,\n 0.01566 4.55%,\n 0.0625 9.091%,\n 0.25,\n 0.5625,\n 1,\n 0.8125 45.455%,\n 0.76566 49.995%,\n 0.75,\n 0.76566 59.096%,\n 0.8125 63.636%,\n 1 72.727%,\n 0.95316 77.268%,\n 0.9375 81.818%,\n 0.95309 86.359%,\n 1 90.909%,\n 0.98438 95.45%,\n 1\n );\n\n position: relative;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 1em;\n}\n.lever {\n fill: var(--fx);\n translate: 0 45%;\n transition:\n translate 0.3s var(--linear),\n fill 0.3s ease-out;\n}\n.timer {\n animation: rotate 1s ease-out infinite;\n outline-width: 2px;\n outline-color: var(--fx);\n outline-style: dashed;\n border-radius: 50%;\n}\n\n.tooltip {\n position: absolute;\n text-shadow: -2px 0px rgba(183, 162, 130, 0.75);\n inset-block-start: 0;\n inset-inline-start: var(--xtip);\n text-align: center;\n line-height: 1.125;\n transform: translateX(var(--xdist));\n border: 6px solid #645620;\n outline-width: 2px;\n outline-offset: -9px;\n outline-color: #64562052;\n outline-style: solid;\n padding: 1em 0.5em 2.5em;\n font-size: 1em;\n border-radius: 1em;\n opacity: 0;\n pointer-events: none;\n transition: all 0.5s var(--linear);\n background: linear-gradient(var(--background) 60%, var(--darker) 100%);\n z-index: -1;\n}\n.toasterGroup {\n &::after {\n content: \"\";\n filter: blur(10px);\n background-color: black;\n border-radius: 50%;\n display: block;\n position: absolute;\n translate: -10px -10%;\n inset-block-end: 0;\n width: 100%;\n height: 10px;\n z-index: 0;\n }\n}\n.toaster {\n transition: all 0.5s var(--elastic-easing);\n}\n.block {\n transition: all 0.125s ease-out;\n}\n\n.tooltip-container:hover {\n .lever {\n translate: 0;\n fill: var(--accent);\n }\n .block {\n fill: var(--fx);\n }\n .tooltip {\n inset-block-start: -50%;\n opacity: 1;\n color: #514621;\n visibility: visible;\n pointer-events: auto;\n\n max-width: 25ch;\n overflow: hidden;\n white-space: normal;\n word-wrap: break-word;\n }\n .toasterGroup::after {\n animation: shadow 0.3s var(--elastic-easing) forwards;\n }\n .toaster {\n --xdist: 0%;\n animation: jump 2s var(--elastic-easing) forwards -0.5s;\n }\n .timer {\n animation-play-state: paused;\n }\n}\n.tooltip-container:hover:active {\n .tooltip {\n --dist: -3em;\n --deg: 359deg;\n animation: jump 0.5s ease-in-out forwards;\n }\n}\n\n@keyframes jump {\n 0%,\n 50% {\n transform: translateX(var(--xdist)) translateY(0);\n }\n 25% {\n transform: translateX(var(--xdist)) translateY(var(--dist))\n rotate(var(--deg));\n }\n}\n@keyframes shadow {\n 0%,\n 50% {\n transform: scale(1);\n }\n 25% {\n transform: scale(0.75) skew(-10deg);\n opacity: 0.85;\n }\n}\n\n@keyframes rotate {\n to {\n outline-color: var(--accent);\n outline-offset: -2px;\n }\n}\n"}

average-horse-2

👁 实时预览

📝 源代码