{"html":"

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

\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.z-10 {\n z-index: 10;\n}\n.flex {\n display: flex;\n}\n.hidden {\n display: none;\n}\n.size-12 {\n width: 3rem;\n height: 3rem;\n}\n.size-\\[3\\.2rem\\] {\n width: 3.2rem;\n height: 3.2rem;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.border {\n border-width: 1px;\n}\n.bg-\\[\\#000000a2\\] {\n background-color: #000000a2;\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.fill-white {\n fill: #fff;\n}\n.duration-500 {\n transition-duration: 500ms;\n}\n.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:bg-\\[\\#0000\\]:hover {\n background-color: #0000;\n}\n.peer:checked ~ .peer-checked\\:-translate-x-16 {\n --tw-translate-x: -4rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.peer:checked ~ .peer-checked\\:-translate-y-16 {\n --tw-translate-y: -4rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.peer:checked ~ .peer-checked\\:translate-x-16 {\n --tw-translate-x: 4rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.peer:checked ~ .peer-checked\\:translate-y-16 {\n --tw-translate-y: 4rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.peer:checked ~ .peer-checked\\:rotate-45 {\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.peer:checked ~ .peer-checked\\:bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.peer:checked ~ .peer-checked\\:delay-\\[0ms\\] {\n transition-delay: 0ms;\n}\n.peer:checked ~ .peer-checked\\:delay-\\[100ms\\] {\n transition-delay: 100ms;\n}\n.peer:checked ~ .peer-checked\\:delay-\\[125ms\\] {\n transition-delay: 125ms;\n}\n.peer:checked ~ .peer-checked\\:delay-\\[150ms\\] {\n transition-delay: 150ms;\n}\n.peer:checked ~ .peer-checked\\:delay-\\[175ms\\] {\n transition-delay: 175ms;\n}\n.peer:checked ~ .peer-checked\\:delay-\\[200ms\\] {\n transition-delay: 200ms;\n}\n.peer:checked ~ .peer-checked\\:delay-\\[225ms\\] {\n transition-delay: 225ms;\n}\n.peer:checked ~ .peer-checked\\:delay-\\[75ms\\] {\n transition-delay: 75ms;\n}\n"}

swift-bear-78

👁 实时预览

📝 源代码