{"html":"

\n Location\n Paris, France\n

\n Paris\n

France

\n","css":"#app {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card {\n top: -100px;\n left: 15%;\n transition: transform 0.3s cubic-bezier(0.74, -0.03, 0.05, 1.24);\n width: 160px;\n height: 95px;\n will-change: transform;\n transform-origin: 50% 100%;\n transform: scale(0);\n filter: blur(10px);\n background: white;\n border-radius: 18px;\n box-shadow:\n 0 0 0 2px #b0dbbf,\n 1px 4px 5px 4px #ededed54;\n padding: 2px;\n animation-duration: 0.3s;\n animation-delay: 0.1s;\n animation-fill-mode: both;\n overflow: hidden;\n}\n\n#app:has(.hover-card:hover) > .reference > .card {\n transform: scale(1);\n animation-name: coolfadeIn;\n}\n\n.card:hover {\n pointer-events: all;\n}\n\n.bg-map {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 0;\n /* background-image: place your image */\n background-position: 15px -32px;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.elements {\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.details {\n z-index: 1;\n margin-bottom: -10%;\n margin-top: -12%;\n flex: 1 1 0;\n background: #daecdd;\n filter: blur(6px);\n}\n.description {\n padding: 15px;\n z-index: 1;\n}\n\n.main-title {\n font-size: 1.2rem;\n color: #4e8e5b;\n font-weight: 600;\n}\n\n.second-title {\n font-size: 0.9em;\n color: #5e836b;\n font-weight: 500;\n}\n\n.inner-card {\n position: relative;\n border-radius: calc(18px - 2%);\n height: 100%;\n width: 100%;\n border: 2px solid #2d2d2d45;\n background: #daecdd;\n overflow: hidden;\n}\n\n.blur-item {\n left: 0;\n top: 0;\n min-width: 60px;\n filter: blur(10px);\n background: #daecdd;\n z-index: -1;\n height: 110%;\n}\n\n.relative {\n position: relative;\n}\n\n.absolute {\n position: absolute;\n}\n\n.location {\n background-color: #226630;\n top: 24%;\n z-index: 1000;\n left: 60%;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n box-shadow: 0 0 10px 7px #c1c1c180;\n border: 5px solid white;\n animation: pulse 3s infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.95);\n box-shadow:\n 0 0 0 0 rgba(72, 72, 72, 0.7),\n 0 0 8px 5px #d9d9d980;\n }\n\n 70% {\n transform: scale(1);\n box-shadow:\n 0 0 0 10px rgba(72, 72, 72, 0),\n 0 0 8px 5px #d9d9d980;\n }\n\n 100% {\n transform: scale(0.95);\n box-shadow:\n 0 0 0 0 rgba(72, 72, 72, 0),\n 0 0 8px 5px #d9d9d980;\n }\n}\n\n@keyframes coolfadeIn {\n 0% {\n filter: brightness(1) blur(10px);\n }\n\n 10% {\n filter: brightness(1) blur(20px);\n }\n\n 100% {\n filter: brightness(1) blur(0px);\n }\n}\n\n@keyframes movingClouds {\n from {\n transform: translateX(-100px);\n }\n to {\n transform: translateX(100px);\n }\n}\n\n.cloud {\n z-index: 1;\n position: absolute;\n border-radius: 50%;\n animation-name: movingClouds;\n animation-timing-function: ease;\n animation-iteration-count: infinite;\n}\n\n.cloud:nth-child(1) {\n animation-duration: 45s;\n height: 1em;\n width: 1.4em;\n top: 3.5em;\n left: 50%;\n filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)\n drop-shadow(-0.625em 0.313em #ffffffae);\n background: linear-gradient(to top right, #ffffffae, #ffffffae);\n transition: 0.4s;\n}\n\n.cloud:nth-child(2) {\n animation-duration: 30s;\n top: 0.325em;\n right: -1em;\n width: 4.075em;\n height: 1.575em;\n background: #ebebebdb;\n filter: blur(0.425em) drop-shadow(-0.313em 0.812em #e0dfdfae)\n drop-shadow(-1.625em 0.812em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);\n}\n\n.cloud:nth-child(3) {\n animation-duration: 60s;\n top: 2.45em;\n right: 4.938em;\n width: 1.075em;\n height: 0.575em;\n background: #ffffff;\n filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)\n drop-shadow(-0.625em 0.313em #ffffffae);\n transition: 0.8s;\n}\n\n.cloud:nth-child(4) {\n animation-duration: 40s;\n top: 4.45em;\n right: 4.938em;\n width: 1.075em;\n height: 0.375em;\n background: #ffffff;\n filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)\n drop-shadow(-0.625em 0.313em #ffffffae);\n transition: 0.8s;\n}\n"}

tasty-panda-0

👁 实时预览

📝 源代码