{"html":"

PINK CITY

PARTILY CLOUDY

\n \n \n \n

32°

Min

30°

Max

32°

\n","css":".cardContainer {\n width: fit-content;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card {\n position: relative;\n width: 220px;\n height: 250px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 20px 10px;\n border-radius: 10px;\n backdrop-filter: blur(30px);\n background-color: rgba(65, 65, 65, 0.308);\n border: 1px solid rgba(255, 255, 255, 0.089);\n cursor: pointer;\n}\n\n.city {\n font-weight: 700;\n font-size: 0.9em;\n letter-spacing: 1.2px;\n color: white;\n}\n\n.weather {\n font-weight: 500;\n font-size: 0.7em;\n letter-spacing: 1.2px;\n color: rgb(197, 197, 197);\n}\n\n.temp {\n font-size: 1.8em;\n color: white;\n}\n\n.minmaxContainer {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.min,\n.max {\n width: 50%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: center;\n padding: 0px 20px;\n gap: 4px;\n}\n\n.max {\n align-items: flex-start;\n border-left: 2px solid white;\n}\n\n.maxHeading,\n.minHeading {\n font-size: 0.7em;\n font-weight: 600;\n color: white;\n}\n\n.maxTemp,\n.minTemp {\n font-size: 0.6em;\n font-weight: 500;\n color: rgb(197, 197, 197);\n}\n\n.cardContainer::before {\n width: 100px;\n height: 100px;\n content: \"\";\n position: absolute;\n background-color: rgb(144, 161, 255);\n z-index: -1;\n border-radius: 50%;\n left: 100px;\n top: 50px;\n transition: all 1s;\n}\n\n.cardContainer:hover::before {\n transform: translate(-50px, 50px);\n}\n"}

grumpy-mule-23

👁 实时预览

📝 源代码