{"html":"

\n\n

\n","css":".card {\n width: 190px;\n height: 254px;\n background: linear-gradient(45deg, #000000, #0a0a2e);\n display: flex;\n justify-content: space-between;\n overflow: hidden;\n border-radius: 15px;\n position: relative;\n cursor: pointer;\n transition:\n transform 0.3s,\n box-shadow 0.3s;\n box-shadow: 0 0 20px rgba(0, 0, 255, 0.1);\n}\n\n.card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(100, 149, 237, 0.3);\n}\n\n/* Enhanced Moon with Craters */\n.moon {\n height: 80px;\n width: 80px;\n background: linear-gradient(145deg, #f0f0f0, #ffffff);\n border-radius: 50%;\n position: absolute;\n right: 55px;\n top: 9px;\n box-shadow:\n 0 0 40px rgba(235, 235, 235, 0.5),\n inset -5px -5px 15px rgba(0, 0, 0, 0.2);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Moon Craters */\n.crater {\n position: absolute;\n background: rgba(200, 200, 200, 0.3);\n border-radius: 50%;\n box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.cr1 {\n width: 15px;\n height: 15px;\n top: 20px;\n left: 15px;\n}\n.cr2 {\n width: 20px;\n height: 20px;\n top: 45px;\n left: 40px;\n}\n.cr3 {\n width: 12px;\n height: 12px;\n top: 55px;\n left: 20px;\n}\n\n/* Enhanced Blubs (Falling Stars) */\n.blub {\n height: calc(3px * var(--j));\n width: calc(1px * var(--j));\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(173, 216, 230, 1) 100%\n );\n box-shadow:\n 0 0 20px rgba(255, 255, 255, 0.8),\n 0 0 30px rgba(173, 216, 230, 0.6);\n animation: animated linear infinite reverse;\n animation-duration: calc(40s / var(--i));\n rotate: 25deg;\n opacity: 0.8;\n filter: blur(calc(0.5px * var(--j)));\n}\n\n@keyframes animated {\n 0% {\n transform: translateY(250px) scale(0.3) rotate(25deg);\n }\n 100% {\n transform: translateY(-40px) scale(1.2) rotate(25deg);\n }\n}\n\n/* Hover Effects */\n.card:hover .moon {\n box-shadow:\n 0 0 60px rgba(173, 216, 230, 0.7),\n inset -8px -8px 20px rgba(0, 0, 0, 0.3);\n background: linear-gradient(145deg, #e0ffff, #ffffff);\n}\n\n.card:hover .blub {\n animation-duration: calc(30s / var(--i));\n opacity: 1;\n}\n"}

green-sheep-53

👁 实时预览

📝 源代码