{"html":"

\n\n \n

\n\n

\n \n

\n\n

\n \n Sunny Day\n

\n\n

\n WED\n 18°\n

\n THU\n 19°\n

\n FRI\n 18°\n

\n\n

\n","css":".card.sunny {\n width: 280px;\n height: 280px;\n background: linear-gradient(180deg, #ffb347 0%, #ff8c42 100%);\n border-radius: 36px;\n position: relative;\n overflow: hidden;\n font-family: \"Courier New\", Courier, monospace;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n user-select: none;\n}\n\n.card.sunny:hover {\n transform: translateY(-8px);\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);\n}\n\n.sky {\n position: absolute;\n inset: 0;\n z-index: 1;\n}\n\n.sun-container {\n position: absolute;\n top: 35px;\n right: 35px;\n width: 50px;\n height: 50px;\n}\n\n.sun-core {\n width: 100%;\n height: 100%;\n background: #fff;\n border-radius: 4px;\n box-shadow:\n 0 0 25px #fff,\n 0 0 50px #ffea00;\n z-index: 2;\n position: relative;\n}\n\n.sun-glow {\n position: absolute;\n inset: -15px;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.4) 0%,\n transparent 70%\n );\n animation: sunPulse 3s ease-in-out infinite;\n}\n\n@keyframes sunPulse {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1.3);\n opacity: 0.8;\n }\n}\n\n.landscape {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 45%;\n shape-rendering: crispEdges;\n}\n\n.content {\n position: relative;\n z-index: 10;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: white;\n}\n\n.main-temp {\n padding: 35px 25px 0;\n filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.1));\n}\n\n.pixel-svg {\n width: 110px;\n height: auto;\n shape-rendering: crispEdges;\n}\n\n.current-status {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 0 30px;\n margin-top: -20px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-size: 13px;\n text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);\n}\n\n.icon-weather {\n width: 22px;\n height: 22px;\n shape-rendering: crispEdges;\n}\n\n.forecast {\n display: flex;\n justify-content: space-between;\n padding: 22px 30px;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(12px) saturate(150%);\n -webkit-backdrop-filter: blur(12px) saturate(150%);\n border-top: 1px solid rgba(255, 255, 255, 0.3);\n box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);\n border-radius: 0 0 35px 35px;\n}\n\n.day-col {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n opacity: 0.75;\n}\n\n.day-col.active {\n opacity: 1;\n text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\n}\n\n.day-label {\n font-size: 10px;\n font-weight: 800;\n color: #fff;\n}\n\n.day-val {\n font-size: 15px;\n font-weight: bold;\n}\n\n.scanlines {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to bottom,\n transparent 50%,\n rgba(0, 0, 0, 0.04) 50%\n );\n background-size: 100% 4px;\n pointer-events: none;\n z-index: 20;\n}\n"}

afraid-fish-87

👁 实时预览

📝 源代码