{"html":"\n","css":"/**********/\n/* Config */\n/**********/\n\n.tooltip {\n --color-background: 88, 101, 242;\n --color-text: #fff;\n --size-diameter: 5rem;\n --size-shadow: 5px;\n}\n\n/*************/\n/* Container */\n/*************/\n\n/* Container - Base */\n.tooltip {\n --size: var(--size-diameter);\n\n align-items: center;\n border: none;\n border-radius: var(--size);\n cursor: pointer;\n display: flex;\n fill: var(--color-text);\n height: var(--size);\n justify-content: center;\n position: relative;\n width: var(--size);\n}\n.tooltip::before,\n.tooltip::after {\n border-radius: inherit;\n height: var(--size);\n position: absolute;\n width: var(--size);\n}\n/* Container - Darken */\n.tooltip::before {\n background: rgba(var(--color-background), 1);\n box-shadow: 0 0 var(--size-shadow) #000;\n content: \"\";\n z-index: 1;\n}\n/* Container - Darken */\n.tooltip::after {\n background: rgba(0, 0, 0, 0.2);\n z-index: 2;\n}\n\n/* Container - Interactions */\n.tooltip:hover::after {\n content: \"\";\n}\n.tooltip:active::before {\n border: 1px solid #000;\n box-shadow: none;\n}\n.tooltip:active::after {\n background: rgba(0, 0, 0, 0.4);\n}\n\n/***********/\n/* Content */\n/***********/\n\n/* Content - Base */\n.tooltip__content {\n --size: calc(0.8 * var(--size-diameter));\n\n border-radius: var(--size);\n height: var(--size);\n position: relative;\n width: var(--size);\n z-index: 3;\n}\n\n/*********/\n/* Label */\n/*********/\n\n/* Label - Base */\n.tooltip__label {\n --size: calc(1 * var(--size-diameter));\n\n background: radial-gradient(\n circle at center,\n transparent 45%,\n rgb(var(--color-background)) 46%\n );\n border-radius: var(--size);\n font-size: calc(0.2 * var(--size-diameter));\n height: var(--size);\n left: calc(50% - var(--size) / 2);\n pointer-events: none;\n position: absolute;\n top: calc(50% - var(--size) / 2);\n transition: all 0.3s linear;\n width: var(--size);\n}\n/* Label - Path */\n.tooltip__label #circlePath {\n display: none;\n}\n/* Label - Text */\n.tooltip__label text {\n dominant-baseline: middle;\n font-weight: 600;\n text-anchor: middle;\n}\n\n/* Label - Interactions */\n.tooltip:hover .tooltip__label {\n --size: calc(var(--size-diameter) + 6em);\n\n box-shadow: 0 0 var(--size-shadow) #000;\n}\n"}

green-duck-75

👁 实时预览

📝 源代码