{"html":"

\n \n\n

\n\n

\n","css":".check-wrapper {\n --pixel-color: #0006;\n --pixel-shadow: 0 0 4px -1px #000;\n --success-color: #9dff4c;\n --success-bg: #7ad62e55;\n --success-shadow: 0 0 12px 2px #9dff4c;\n --danger-color: #ff3b6c;\n --danger-bg: #00000055;\n --danger-shadow: 0 0 12px 2px #ff2f63;\n --pixel-size: 5px;\n --pixel-gap: 2px;\n --pad: 6px;\n --border-radius: 4px;\n\n position: relative;\n margin: 1rem;\n}\n\n.check {\n position: absolute;\n margin: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n}\n\n.monitor {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-template-rows: repeat(7, 1fr);\n gap: var(--pixel-gap);\n padding: var(--pad);\n border-radius: var(--border-radius);\n border: 2px solid #0005;\n box-sizing: border-box;\n transition: background-color 1.8s ease;\n background-image: linear-gradient(to bottom, #fff7, #0003);\n background-color: var(--danger-bg);\n box-shadow:\n inset 0 6px 12px -5px #000,\n inset 0 -6px 12px -5px #000,\n 0 6px 12px -5px #0007,\n 0 8px 16px -5px #0007;\n}\n\n.monitor:before {\n content: \"\";\n position: absolute;\n inset: -10%;\n width: 120%;\n height: 120%;\n background-color: #0002;\n background-image: linear-gradient(to bottom, #0000, #0002);\n border-radius: calc(var(--border-radius) + var(--pad));\n box-shadow:\n 0px 1px 1px rgba(3, 7, 18, 0.02),\n 0px 5px 4px rgba(3, 7, 18, 0.03),\n 0px 12px 9px rgba(3, 7, 18, 0.05),\n 0px 20px 15px rgba(3, 7, 18, 0.06),\n 0px 32px 24px rgba(3, 7, 18, 0.08);\n z-index: -1;\n pointer-events: none;\n}\n\n.light {\n position: absolute;\n inset: -50% -25%;\n width: 150%;\n height: 150%;\n background-color: #fff2;\n filter: blur(16px);\n pointer-events: none;\n z-index: 1;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.check:hover ~ .light {\n opacity: 1;\n}\n\n.pixel {\n pointer-events: none;\n width: var(--pixel-size);\n height: var(--pixel-size);\n background-color: var(--pixel-color);\n box-shadow: var(--pixel-shadow);\n border-radius: 2px;\n transition:\n background-color 1.8s ease,\n box-shadow 1.8s ease;\n transition-delay: 0s;\n}\n\n.pixel:nth-child(9) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n.pixel:nth-child(13) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n.pixel:nth-child(17) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n.pixel:nth-child(19) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n.pixel:nth-child(25) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n.pixel:nth-child(31) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n.pixel:nth-child(33) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n.pixel:nth-child(37) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n.pixel:nth-child(41) {\n background-color: var(--danger-color);\n box-shadow: var(--danger-shadow);\n}\n\n.check:checked ~ .monitor .pixel:nth-child(9),\n.check:checked ~ .monitor .pixel:nth-child(17),\n.check:checked ~ .monitor .pixel:nth-child(25),\n.check:checked ~ .monitor .pixel:nth-child(33),\n.check:checked ~ .monitor .pixel:nth-child(41),\n.check:checked ~ .monitor .pixel:nth-child(13),\n.check:checked ~ .monitor .pixel:nth-child(19),\n.check:checked ~ .monitor .pixel:nth-child(31),\n.check:checked ~ .monitor .pixel:nth-child(37) {\n background-color: var(--pixel-color);\n box-shadow: none;\n}\n\n.check:checked ~ .monitor .pixel:nth-child(13),\n.check:checked ~ .monitor .pixel:nth-child(19),\n.check:checked ~ .monitor .pixel:nth-child(23),\n.check:checked ~ .monitor .pixel:nth-child(25),\n.check:checked ~ .monitor .pixel:nth-child(31) {\n background-color: var(--success-color);\n box-shadow: var(--success-shadow);\n}\n\n.check:checked ~ .monitor {\n background-color: var(--success-bg);\n}\n\n.check:checked ~ .monitor .pixel {\n animation: animate 1.8s ease;\n animation-delay: calc(var(--i) * 0.02s);\n transition-delay: calc(var(--i) * 0.02s);\n}\n\n@keyframes animate {\n 20% {\n filter: drop-shadow(0 -3px 3px white);\n transform: scaleX(0.5);\n }\n 100% {\n transform: rotateY(180deg);\n }\n}\n"}

rotten-jellyfish-30

👁 实时预览

📝 源代码