{"html":"

\n\n

\n","css":".heart {\n display: inline-grid;\n grid-template-columns: repeat(13, 20px);\n grid-template-rows: repeat(11, 20px);\n gap: 1px;\n padding: 20px;\n animation: heartbeat 2s infinite ease-in-out;\n}\n.pixel {\n width: 20px;\n height: 20px;\n transition: all 0.3s ease;\n transform: scale(1);\n}\n.pixel.pink {\n background: #e63946;\n animation: pinkPulse 2.5s infinite ease-in-out;\n}\n.pixel.soft-pink {\n background: #f1a1b4;\n animation: softPinkPulse 2.2s infinite ease-in-out;\n}\n.pixel.white {\n background: #ffeaea;\n animation: whitePulse 2.8s infinite ease-in-out;\n}\n@keyframes heartbeat {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.02);\n }\n}\n@keyframes pinkPulse {\n 0%,\n 100% {\n background: #ff6b81;\n transform: scale(1);\n box-shadow: 0 0 0 rgba(230, 57, 70, 0);\n }\n 50% {\n background: #e63946;\n transform: scale(1.05);\n box-shadow: 0 0 10px rgba(230, 57, 70, 0.6);\n }\n}\n@keyframes softPinkPulse {\n 0%,\n 100% {\n background: #e63946;\n transform: scale(1);\n box-shadow: 0 0 0 rgba(241, 161, 180, 0);\n }\n 50% {\n background: #f1a1b4;\n transform: scale(1.05);\n box-shadow: 0 0 8px rgba(241, 161, 180, 0.6);\n }\n}\n@keyframes whitePulse {\n 0%,\n 100% {\n background: #ffe3e3;\n transform: scale(1);\n box-shadow: 0 0 0 rgba(255, 234, 234, 0);\n }\n 50% {\n background: #ffeaea;\n transform: scale(1.05);\n box-shadow: 0 0 15px rgba(255, 234, 234, 0.8);\n }\n}\n"}

blue-goat-34

👁 实时预览

📝 源代码