{"html":"

\n \n\n

\n Like \n

\n","css":".tooltip {\n --bg: #fff;\n --cl: red;\n --sz: 1rem;\n --sizer: 44px;\n --h-cnt: calc(var(--sz) * 2);\n position: relative;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.trigger {\n color: var(--cl);\n background: var(--bg);\n font-weight: 600;\n cursor: pointer;\n border-radius: 999px;\n padding: calc(var(--sz) / 2);\n font-size: var(--sz);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n outline: none;\n box-shadow:\n rgba(95, 95, 115, 0.25) 0px 2px 5px -1px,\n rgba(255, 255, 255, 0.3) 0px 1px 3px -1px;\n}\n.trigger .heart {\n --sizer: 30px;\n transition: all 0.2s ease;\n color: var(--cl);\n margin-bottom: -2px;\n}\n.trigger .heart .fill {\n opacity: 0;\n display: none;\n}\n\n.trigger:hover {\n --scale-1: 0.9;\n --scale-2: 0.8;\n animation: scaling 1s ease infinite;\n}\n.trigger:hover .heart {\n --scale-1: 1.3;\n --scale-2: 1.4;\n animation: scaling 1s ease infinite;\n}\n@keyframes scaling {\n 0% {\n transform: scale(1);\n }\n 20%,\n 90% {\n transform: scale(var(--scale-1));\n }\n 50% {\n transform: scale(var(--scale-2));\n }\n}\n\n.trigger .checkround {\n position: absolute;\n fill: none;\n stroke: var(--cl);\n scale: 1.1;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dashoffset: 162.6;\n stroke-dasharray: 0 330 158 134.6;\n rotate: 130deg;\n opacity: 0.6;\n z-index: -1;\n cursor: none;\n pointer-events: none;\n}\n\n.content {\n position: absolute;\n border-radius: 999px;\n top: calc(var(--h-cnt) * -0.75);\n font-size: 14px;\n padding: calc(var(--sz) / 4) calc(var(--sz) / 2);\n z-index: -1;\n pointer-events: none;\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: max-content;\n transition: all 0.3s ease;\n opacity: 0;\n transform: scale(0) translate(0, 200%);\n font-weight: 600;\n background-color: var(--cl);\n color: whitesmoke;\n}\n\n.content::before {\n position: absolute;\n content: \"\";\n height: 1rem;\n width: 1rem;\n bottom: -0.2em;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n border-radius: 2px;\n z-index: -2;\n background-color: transparent;\n}\n\n.tooltip .trigger:hover + .content {\n top: calc(var(--h-cnt) * -1.25);\n visibility: visible;\n pointer-events: auto;\n opacity: 1;\n transform: scale(1) translate(0%, 0%);\n}\n\n.content span {\n --y-crease: 16px;\n position: relative;\n margin-left: 4px;\n height: var(--y-crease);\n overflow: hidden;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n margin-bottom: -1px;\n}\n.content span::before,\n.content span::after {\n line-height: 1.1;\n position: relative;\n transform: translateY(calc(var(--y-crease) / 2));\n transition: transform 0.5s ease;\n transition-delay: 0s;\n}\n.content span::before {\n content: attr(data-decrease);\n}\n.content span::after {\n content: attr(data-increase);\n}\n\n/* Like Indicator */\n.trigger:focus .heart .fill {\n display: unset;\n animation: filled 0.2s ease 1s forwards;\n}\n@keyframes filled {\n to {\n opacity: 0.3;\n }\n}\n.trigger:focus + .content span::before,\n.trigger:focus + .content span::after {\n transform: translateY(calc((var(--y-crease) / 2) * -1));\n transition-delay: 1s;\n}\n.trigger:focus .checkround {\n animation:\n stroke 0.9s linear forwards,\n checkhide 0.45s linear 0.9s forwards;\n}\n@keyframes stroke {\n to {\n stroke-dasharray: 0 163 158 134.6;\n }\n}\n@keyframes checkhide {\n to {\n stroke: var(--bg);\n scale: 0;\n stroke-width: 0;\n opacity: 0;\n }\n}\n\n.sizer {\n width: var(--sizer);\n min-width: var(--sizer);\n max-width: var(--sizer);\n height: var(--sizer);\n min-height: var(--sizer);\n max-height: var(--sizer);\n}\n"}

polite-wasp-12

👁 实时预览

📝 源代码