{"html":"

\n \n \n \n \n \n \n \n \n \n \n

\n","css":".card {\n display: grid;\n place-content: center;\n width: 100%;\n height: 100%;\n background: #e7e7e7;\n font-family: \"Quicksand\", sans-serif;\n -webkit-tap-highlight-color: transparent;\n}\n\n.clay-slab {\n max-width: 333px;\n padding: 1rem;\n border-radius: 40px;\n background: #e7e7e7;\n box-shadow:\n inset 6px 6px 12px #c5c5c5,\n inset -6px -6px 12px #ffffff;\n}\n\n.container-items {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 12px;\n}\n\n.item-color {\n position: relative;\n flex-shrink: 0;\n width: 50px;\n height: 50px;\n border: none;\n outline: none;\n cursor: pointer;\n background-color: var(--color);\n border-radius: 41% 59% 45% 55% / 58% 44% 56% 42%;\n transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);\n box-shadow:\n 4px 4px 8px rgba(160, 160, 160, 0.6),\n -4px -4px 8px rgba(255, 255, 255, 0.8),\n inset 2px 2px 4px color-mix(in srgb, var(--color) 80%, black),\n inset -2px -2px 4px color-mix(in srgb, var(--color) 80%, white);\n}\n\n.item-color::before {\n position: absolute;\n content: attr(aria-color);\n left: 50%;\n bottom: 120%;\n transform: translateX(-50%) scale(0);\n padding: 8px 12px;\n background: #e7e7e7;\n border-radius: 20px;\n font-size: 14px;\n color: #555;\n white-space: nowrap;\n box-shadow:\n inset 2px 2px 4px #c5c5c5,\n inset -2px -2px 4px #ffffff;\n pointer-events: none;\n opacity: 0;\n transform-origin: bottom center;\n transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.item-color:hover {\n transform: translateY(-5px) scale(1.05);\n border-radius: 50%;\n}\n\n.item-color:hover::before {\n opacity: 1;\n transform: translateX(-50%) scale(1);\n}\n\n.item-color:active {\n transform: translateY(2px) scale(0.95);\n box-shadow:\n 1px 1px 4px rgba(160, 160, 160, 0.6),\n -1px -1px 4px rgba(255, 255, 255, 0.8),\n inset 8px 8px 16px color-mix(in srgb, var(--color) 80%, black),\n inset -8px -8px 16px color-mix(in srgb, var(--color) 80%, white);\n}\n\n.item-color:focus::before {\n content: \"Copied\";\n color: #10b981;\n opacity: 1;\n transform: translateX(-50%) scale(1);\n}\n"}

horrible-zebra-60

👁 实时预览

📝 源代码