{"html":"

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

BRUTAL ITEM

99.99

UNCOMPROMISING. RAW. FUNCTIONAL.

ADD TO CART

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

99.99

ADDED TO CART

\n","css":".card {\n width: 280px;\n height: 340px;\n background: #fff;\n border: 4px solid #000;\n position: relative;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n overflow: hidden;\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n\n.card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n transform-style: preserve-3d;\n}\n\n.card:active .card-inner {\n transform: rotateY(180deg);\n}\n\n.card-front,\n.card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n background: #fff;\n}\n\n.card-back {\n transform: rotateY(180deg);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n background: #000000;\n color: #fff;\n border: 8px solid #fff;\n box-sizing: border-box;\n}\n\n.added-text {\n font-size: 24px;\n font-weight: 900;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 20px;\n animation: added-glitch 2s ease-out;\n}\n\n.added-subtext {\n font-size: 14px;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: 0.8;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n top: -100%;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(\n 90deg,\n transparent,\n #fff 30%,\n #fff 70%,\n transparent\n );\n box-shadow:\n 0 0 8px #fff,\n 0 0 16px #fff,\n 0 0 24px rgba(255, 255, 255, 0.8);\n opacity: 0.6;\n z-index: 10;\n animation: scanline 4s linear infinite;\n}\n\n.card:hover::after {\n opacity: 1;\n animation: scanline-fast 1.2s linear infinite;\n}\n\n.card:hover {\n transform: rotate(-5deg) scale(1.1) skew(-2deg);\n box-shadow:\n 10px 10px 0 #000,\n 20px 20px 0 #333,\n 30px 30px 0 #666,\n 40px 40px 0 #999;\n border-width: 8px;\n filter: contrast(1.3) brightness(1.1);\n}\n\n.product-image {\n width: 100%;\n height: 150px;\n background: #000;\n position: relative;\n border-bottom: 8px solid #000;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.product-svg {\n width: 80px;\n height: 80px;\n transition: all 0.3s ease;\n}\n\n.card:hover .product-svg {\n animation:\n brutal-spin 0.4s ease-in-out,\n svg-glitch 0.6s ease-in-out;\n transform: scale(1.2);\n}\n\n.card-content {\n padding: 16px;\n position: relative;\n z-index: 2;\n background: #fff;\n height: calc(100% - 160px);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.product-title {\n font-size: 16px;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 6px;\n border-bottom: 4px solid #000;\n padding-bottom: 2px;\n line-height: 1.1;\n}\n\n.product-price {\n font-size: 20px;\n font-weight: 900;\n margin-bottom: 8px;\n}\n\n.product-description {\n font-size: 10px;\n line-height: 1.2;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 12px;\n flex-grow: 1;\n}\n\n.buy-button {\n width: 100%;\n padding: 10px;\n background: #000;\n color: #fff;\n border: 4px solid #000;\n font-family: \"Helvitica\", monospace;\n text-align: center;\n font-size: 14px;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 2px;\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n overflow: hidden;\n}\n\n.buy-button::before {\n content: \"BUY NOW\";\n position: absolute;\n top: 10px;\n left: -100%;\n width: 100%;\n height: 100%;\n background: #d9d4d4;\n transition: all 0.3s ease;\n}\n\n.card:hover .buy-button::before {\n left: 0;\n}\n\n.card:hover .buy-button {\n color: #060606;\n}\n\n.card:hover .buy-button span {\n position: relative;\n z-index: 1;\n}\n\n@keyframes added-glitch {\n 0% {\n transform: scale(0.8);\n filter: invert(0);\n opacity: 0;\n }\n 10% {\n transform: scale(1.2) skew(-5deg);\n filter: invert(1);\n opacity: 1;\n }\n 20% {\n transform: scale(0.9) skew(3deg);\n filter: invert(0);\n }\n 30% {\n transform: scale(1.1) skew(-2deg);\n filter: invert(1);\n }\n 40% {\n transform: scale(1) skew(1deg);\n filter: invert(0);\n }\n 50% {\n transform: scale(1.05) skew(0deg);\n filter: invert(1);\n }\n 70% {\n transform: scale(1);\n filter: invert(0);\n }\n 100% {\n transform: scale(1);\n filter: invert(0);\n }\n}\n\n@keyframes scanline-glitch {\n 0% {\n height: 2px;\n opacity: 1;\n }\n 20% {\n height: 8px;\n opacity: 0.3;\n }\n 40% {\n height: 1px;\n opacity: 1;\n }\n 60% {\n height: 12px;\n opacity: 0.2;\n }\n 80% {\n height: 2px;\n opacity: 0.8;\n }\n 100% {\n height: 2px;\n opacity: 1;\n }\n}\n\n@keyframes scanline-chaos {\n 0% {\n transform: translateY(0);\n }\n 25% {\n transform: translateY(-2px) scaleY(1.5);\n }\n 50% {\n transform: translateY(1px) scaleY(0.8);\n }\n 75% {\n transform: translateY(-1px) scaleY(1.2);\n }\n 100% {\n transform: translateY(0);\n }\n}\n\n@keyframes scanline {\n 0% {\n top: -100%;\n opacity: 0;\n }\n 3% {\n opacity: 0.3;\n }\n 97% {\n opacity: 0.3;\n }\n 100% {\n top: 100%;\n opacity: 0;\n }\n}\n\n@keyframes scanline-fast {\n 0% {\n top: -100%;\n opacity: 0;\n }\n 8% {\n opacity: 1;\n }\n 92% {\n opacity: 1;\n }\n 100% {\n top: 100%;\n opacity: 0;\n }\n}\n\n@keyframes brutal-spin {\n 0% {\n transform: scale(1.2) rotate(0deg);\n }\n 25% {\n transform: scale(1.4) rotate(90deg);\n }\n 50% {\n transform: scale(1.2) rotate(180deg);\n }\n 75% {\n transform: scale(1.4) rotate(270deg);\n }\n 100% {\n transform: scale(1.2) rotate(360deg);\n }\n}\n\n@keyframes brutal-click {\n 0% {\n transform: scale(1.2) rotate(0deg);\n filter: invert(0);\n }\n 15% {\n transform: scale(1.4) rotate(-10deg);\n filter: invert(1);\n }\n 30% {\n transform: scale(1.1) rotate(5deg);\n filter: invert(0);\n }\n 45% {\n transform: scale(1.3) rotate(-3deg);\n filter: invert(1);\n }\n 60% {\n transform: scale(1.15) rotate(2deg);\n filter: invert(0);\n }\n 75% {\n transform: scale(1.25) rotate(-1deg);\n filter: invert(1);\n }\n 90% {\n transform: scale(1.1) rotate(0deg);\n filter: invert(0);\n }\n 100% {\n transform: scale(1.2) rotate(0deg);\n filter: invert(0);\n }\n}\n\n@keyframes brutal-spin {\n 0% {\n transform: scale(1.2) rotate(0deg);\n }\n 25% {\n transform: scale(1.4) rotate(90deg);\n }\n 50% {\n transform: scale(1.2) rotate(180deg);\n }\n 75% {\n transform: scale(1.4) rotate(270deg);\n }\n 100% {\n transform: scale(1.2) rotate(360deg);\n }\n}\n\n@keyframes svg-glitch {\n 0%,\n 100% {\n filter: invert(0);\n }\n 10% {\n filter: invert(1);\n }\n 20% {\n filter: invert(0);\n }\n 30% {\n filter: invert(1);\n }\n 40% {\n filter: invert(0);\n }\n}\n\n@keyframes glitch {\n 0%,\n 100% {\n transform: translate(-50%, -50%);\n }\n 20% {\n transform: translate(-48%, -52%);\n }\n 40% {\n transform: translate(-52%, -48%);\n }\n 60% {\n transform: translate(-50%, -52%);\n }\n 80% {\n transform: translate(-48%, -50%);\n }\n}\n\n@keyframes diagonal-slide {\n 0% {\n transform: translateX(-100%) translateY(-100%);\n }\n 100% {\n transform: translateX(0) translateY(0);\n }\n}\n\n.noise {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n background-image: radial-gradient(circle, #000 1px, transparent 1px);\n background-size: 4px 4px;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n\n.card:hover .noise {\n opacity: 0.05;\n animation: noise-move 0.1s infinite;\n}\n\n@keyframes noise-move {\n 0% {\n transform: translate(0, 0);\n }\n 10% {\n transform: translate(-1px, -1px);\n }\n 20% {\n transform: translate(1px, -1px);\n }\n 30% {\n transform: translate(-1px, 1px);\n }\n 40% {\n transform: translate(1px, 1px);\n }\n 50% {\n transform: translate(-1px, -1px);\n }\n 60% {\n transform: translate(1px, -1px);\n }\n 70% {\n transform: translate(-1px, 1px);\n }\n 80% {\n transform: translate(1px, 1px);\n }\n 90% {\n transform: translate(-1px, -1px);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n"}

nervous-dodo-39

👁 实时预览

📝 源代码