{"html":"

Aldgate

Liverpool

Moorgate

Barbican

\n\n

Name | Line 1

Image

\n","css":".metro-line-card {\n width: 15em;\n height: 10em;\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n position: relative;\n z-index: 0;\n box-shadow: inset 0em -1em rgb(255, 0, 64);\n}\n.metro-line-point {\n background-color: white;\n width: 1.5em;\n height: 1.5em;\n border-radius: 50%;\n border: solid 0.25em black;\n position: relative;\n z-index: 0;\n transition: all 0.25s ease-in-out;\n}\n\n.metro-line-point:hover {\n border: solid 0.5em black;\n}\n\n.metro-line-point p {\n position: absolute;\n top: 50%;\n left: 50%;\n font-weight: bold;\n transform: rotate(-50deg) translate(50%, -200%);\n z-index: 0;\n opacity: 100%;\n transition: all 0.25s ease-in-out;\n}\n\n.metro-line-point:hover p {\n opacity: 0%;\n}\n\n.metro-line-point div {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 1.5em;\n height: 2em;\n background-color: rgb(255, 0, 64);\n transform: translate(-50%, -150%);\n border-radius: 50%;\n z-index: 0;\n opacity: 0%;\n transition: all 0.25s ease-in-out;\n}\n\n.metro-line-point:hover div {\n opacity: 100%;\n transform: translate(-50%, -175%);\n}\n\n.metro-line-information {\n width: 100%;\n height: 7.25em;\n background-color: rgb(255, 0, 64);\n position: absolute;\n z-index: 1;\n top: 10%;\n border-radius: 1em;\n opacity: 0%;\n transition: all 0.25s ease-in-out;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n font-weight: bold;\n}\n\n.metro-line-information div {\n background-color: white;\n width: 80%;\n height: 4em;\n border: solid 0.25em black;\n border-radius: 1em;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: bold;\n}\n\n.metro-line-point:hover ~ .metro-line-information {\n opacity: 100%;\n top: 0%;\n}\n"}

splendid-dingo-30

👁 实时预览

📝 源代码