{"html":"

\n \n

\n Beach city\n

\n Flower city\n

\n Surf city\n

\n Capital city\n

\n Funland\n

\n Coast city\n

\n","css":"/*************/\n/* Variables */\n/*************/\n\n.map-container {\n --city-radius: 2rem;\n --city-sign-color-back: #00c080;\n --city-sign-color-font: #fff;\n --city-pin-size-font: 1.2rem;\n}\n\n/**********/\n/* Styles */\n/**********/\n\n/* Container */\n.map-container {\n border-radius: 0.5em;\n box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);\n line-height: 1;\n min-width: 15rem;\n position: relative;\n width: 50%;\n aspect-ratio: 1;\n}\n\n/* Map - Background */\n.map-background {\n border-radius: inherit;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n/* Map - Cities */\n.map-cities {\n width: 100%;\n}\n.map-city {\n border-radius: var(--city-radius);\n left: calc(var(--x) * 1% - var(--city-radius));\n padding: var(--city-radius);\n position: absolute;\n top: calc(var(--y) * 1% - var(--city-radius));\n}\n.map-city::after,\n.map-city::before {\n font-size: var(--city-pin-size-font);\n}\n.map-city::before {\n content: \"•\";\n left: calc(-50% + var(--city-radius));\n position: absolute;\n top: calc(-0.65em + var(--city-radius));\n text-align: center;\n text-shadow: 0 1px 1px #000;\n width: 100%;\n}\n.map-city::after {\n clip-path: inset(-0.5em 0 0 0);\n content: \"📍\";\n left: calc(-50% + var(--city-radius));\n position: absolute;\n top: calc(-1em + var(--city-radius));\n text-align: center;\n transition: all 300ms ease-out;\n width: 100%;\n z-index: var(--y);\n}\n\n/* Map - Sign */\n.map-city__label {\n display: none;\n left: calc(-5em + 50%);\n position: absolute;\n text-align: center;\n width: 10em;\n z-index: 999;\n}\n.map-city__sign {\n align-items: center;\n background-color: var(--city-sign-color-back);\n border-radius: 0.2rem;\n border: 0.15em solid var(--city-sign-color-font);\n box-shadow: 0 0 3px #000;\n color: var(--city-sign-color-font);\n column-gap: 0.3em;\n display: flex;\n font-weight: 700;\n justify-content: center;\n margin: 0 auto;\n max-width: 100%;\n overflow: hidden;\n padding: 0.4em 0.6em 0.4em 0.3em;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n width: max-content;\n}\n.map-city__sign::before {\n content: attr(data-icon);\n}\n\n/************/\n/* Tracking */\n/************/\n\n/* Map - Cities */\n.map-city:hover::after {\n clip-path: inset(-0.5em 0 0.5em 0);\n transform: translateY(0.5em);\n}\n\n/* Map - Sign */\n.map-city:hover .map-city__label {\n animation: fadein 300ms forwards ease-out;\n display: block;\n}\n\n.map-city:hover .map-city__sign.anim::before {\n animation-duration: 500ms;\n animation-fill-mode: forwards;\n}\n.map-city:hover .map-city__sign.anim-grow::before {\n animation-name: grow;\n animation-timing-function: ease-in;\n}\n.map-city:hover .map-city__sign.anim-slidein::before {\n animation-name: slidein;\n animation-timing-function: ease-out;\n}\n\n/**************/\n/* Animations */\n/**************/\n\n/* Fade in from top */\n@keyframes fadein {\n 0% {\n opacity: 0;\n top: calc(var(--city-radius));\n }\n\n 100% {\n opacity: 1;\n top: calc(var(--city-radius) + var(--city-pin-size-font) / 2);\n }\n}\n\n/* Grow from the ground */\n@keyframes grow {\n 0% {\n transform: translate(0, 200%);\n }\n\n 10% {\n transform: translate(5%, 180%);\n }\n\n 20% {\n transform: translate(-10%, 160%);\n }\n\n 30% {\n transform: translate(15%, 140%);\n }\n\n 40% {\n transform: translate(-5%, 120%);\n }\n\n 50% {\n transform: translate(10%, 100%);\n }\n\n 60% {\n transform: translate(-15%, 80%);\n }\n\n 70% {\n transform: translate(5%, 60%);\n }\n\n 80% {\n transform: translate(0, 40%);\n }\n\n 90% {\n transform: translate(0, 20%);\n }\n\n 100% {\n transform: translate(0, 0);\n }\n}\n\n/* Slide in from left */\n@keyframes slidein {\n 0% {\n transform: translateX(-200%);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n"}

white-newt-65

👁 实时预览

📝 源代码