{"html":"

\n \n\n

View on Map

\n\n

\n","css":".map-btn-wrapper {\n --btn-color: #f5101b;\n --text-color: #fff;\n --land-color: #ffdd9f;\n --veg-color: #36ad5aa9;\n --water-color: #b3e3ff;\n --transition-dur: 0.3s;\n\n position: relative;\n display: flex;\n\n font-size: 16px;\n font-family: \"Inter\", sans-serif;\n\n user-select: none;\n overflow: hidden;\n border-radius: 50ch;\n\n box-shadow:\n 0px -1px 2px rgba(3, 7, 18, 0.005),\n 0px -5px 6px rgba(3, 7, 18, 0.009),\n 0px -12px 12px rgba(3, 7, 18, 0.015),\n 0px -20px 22px rgba(3, 7, 18, 0.02),\n 0px -32px 32px rgba(3, 7, 18, 0.06);\n\n transition: transform var(--transition-dur) ease;\n}\n\n.map-btn {\n cursor: pointer;\n padding: 1em 1.5em 1em 3.5em;\n\n border-radius: 50ch;\n\n background-color: var(--btn-color);\n\n font-weight: 600;\n color: var(--text-color);\n\n transition:\n color var(--transition-dur) ease-in-out,\n background-color var(--transition-dur) ease-in-out;\n}\n\n.pinpoint {\n pointer-events: none;\n position: absolute;\n height: 60%;\n aspect-ratio: 1;\n top: 20%;\n left: 0.75em;\n\n border-radius: 50% 50% 50% 50%;\n background-color: var(--text-color);\n transform: rotateZ(45deg);\n\n mask-image: radial-gradient(circle at center, #0000 0%, #0000 32%, #fff 36%);\n filter: blur(0.25px);\n transition:\n background-color var(--transition-dur) ease-in-out,\n transform var(--transition-dur) ease-in-out,\n border-radius calc(var(--transition-dur) + 0.1s) ease;\n z-index: 1;\n}\n\n.map-container {\n pointer-events: none;\n position: absolute;\n left: 0px;\n top: 115px;\n perspective: 120px;\n transform: perspective(120px) rotateX(35deg) scaleX(0);\n transform-origin: 3em 0.5em;\n transition:\n transform var(--transition-dur) ease-in-out,\n opacity var(--transition-dur) ease-in-out;\n opacity: 0;\n z-index: 0;\n}\n\n.map {\n position: absolute;\n bottom: 100px;\n width: 120px;\n height: 200px;\n background-color: var(--water-color);\n background-image: linear-gradient(to bottom, #fff2, 30%, #0000);\n transform-origin: left bottom;\n}\n.map::after {\n content: \"\";\n top: -40;\n left: 12;\n width: 100%;\n height: 200%;\n background-color: var(--land-color);\n position: absolute;\n filter: url(#land);\n box-shadow: inset 0 0 48px 24px var(--veg-color);\n z-index: 0;\n}\n.fold-1,\n.fold-2,\n.fold-3,\n.fold-4 {\n mask-image: linear-gradient(to top, #fff, 97%, #0000);\n overflow: hidden;\n}\n\n.fold-1 {\n left: -60px;\n transform: rotateY(10deg) translateZ(30px);\n}\n.fold-2 {\n left: 60px;\n transform: rotateY(-10deg) translateZ(10px);\n}\n.fold-3 {\n left: -169px;\n transform: rotateY(-15deg) translateZ(-1px);\n}\n.fold-4 {\n left: 166px;\n transform: rotateY(15deg) translateZ(31px);\n}\n.fold-1::before,\n.fold-2::before,\n.fold-3::before,\n.fold-4::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 10px 16px 3px #0004;\n z-index: 1;\n}\n\n/* Hover states */\n.map-btn-wrapper:has(.map-btn:hover) {\n transform: scale(1.1);\n}\n.map-btn:hover {\n background-color: var(--text-color);\n color: #00000025;\n}\n.map-btn:hover + .pinpoint {\n background-color: var(--btn-color);\n border-radius: 50% 50% 0 50%;\n transform: rotateZ(45deg) translate(-0.3em, -0.3em);\n}\n.map-btn:hover ~ .map-container {\n transform: perspective(100px) rotateX(35deg) scaleX(0.85);\n opacity: 1;\n}\n\n/* Active states */\n.map-btn-wrapper:has(.map-btn:active) {\n transform: scale(1.02) translateY(0.2em);\n}\n.map-btn:active + .pinpoint {\n transform: rotateZ(45deg) translate(0em, 0em);\n transition-duration: calc(var(--transition-dur) * 0.5);\n}\n.map-btn:active ~ .map-container {\n transform: perspective(95px) rotateX(35deg) scaleX(0.85);\n transition-duration: calc(var(--transition-dur) * 0.5);\n}\n"}

ancient-duck-34

👁 实时预览

📝 源代码