{"html":"

\n\n

LINKS

\n\n \n

\n\n

SYS//SOCIAL_LINKS

\n\n

\n","css":".brutalist-container {\n position: relative;\n width: 300px;\n height: 110px;\n cursor: pointer;\n}\n\n.concrete-block {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #000;\n border: 8px solid #000;\n transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n overflow: hidden;\n}\n\n.brutalist-container:hover .concrete-block {\n transform: translate(-12px, -12px) rotate(-2deg);\n box-shadow:\n 12px 12px 0 #333,\n 24px 24px 0 #666,\n 36px 36px 0 #999;\n}\n\n.concrete-texture {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n #000 0px,\n #000 2px,\n #111 2px,\n #111 4px\n ),\n repeating-linear-gradient(\n -45deg,\n transparent 0px,\n transparent 8px,\n rgba(255, 255, 255, 0.05) 8px,\n rgba(255, 255, 255, 0.05) 10px\n );\n opacity: 0.3;\n}\n\n.main-content {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n}\n\n.title-text {\n color: #fff;\n font-size: 32px;\n font-weight: 400;\n letter-spacing: 6px;\n text-transform: uppercase;\n transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n text-shadow:\n 2px 2px 0 #333,\n 4px 4px 0 #666;\n}\n\n.brutalist-container:hover .title-text {\n opacity: 0;\n transform: translateY(-40px) rotateX(90deg) scale(0.3);\n filter: blur(8px);\n}\n\n.social-grid {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(2, 1fr);\n gap: 3px;\n padding: 14px;\n opacity: 0;\n transform: translateY(40px) rotateX(-90deg) scale(1.3);\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.brutalist-container:hover .social-grid {\n opacity: 1;\n transform: translateY(0) rotateX(0deg) scale(1);\n}\n\n.social-cell {\n position: relative;\n background: #fff;\n border: 4px solid #000;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n overflow: hidden;\n}\n\n.social-cell:nth-child(1) {\n transition-delay: 0.1s;\n}\n.social-cell:nth-child(2) {\n transition-delay: 0.1s;\n}\n.social-cell:nth-child(3) {\n transition-delay: 0.1s;\n}\n.social-cell:nth-child(4) {\n transition-delay: 0.1s;\n}\n\n.social-cell:hover {\n background: #000;\n transform: scale(1.1) rotate(5deg);\n border-color: #fff;\n z-index: 10;\n box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);\n}\n\n.social-cell:hover .social-icon {\n fill: #fff;\n transform: scale(1.2) rotate(-5deg);\n}\n\n.social-icon {\n width: 24px;\n height: 24px;\n fill: #000;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n/* Concrete slab backgrounds */\n.slab-bg {\n position: absolute;\n background: #ddd;\n border: 4px solid #000;\n z-index: -1;\n transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.slab-1 {\n top: 18px;\n left: 18px;\n width: 264px;\n height: 74px;\n}\n\n.slab-2 {\n top: 36px;\n left: 36px;\n width: 228px;\n height: 38px;\n}\n\n.brutalist-container:hover .slab-1 {\n transform: translate(20px, 20px) rotate(1deg);\n}\n\n.brutalist-container:hover .slab-2 {\n transform: translate(-10px, 30px) rotate(-1deg);\n}\n\n/* Industrial corner brackets */\n.corner-bracket {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 4px solid #000;\n background: #fff;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.bracket-tl {\n top: -10px;\n left: -10px;\n border-right: none;\n border-bottom: none;\n}\n\n.bracket-tr {\n top: -10px;\n right: -10px;\n border-left: none;\n border-bottom: none;\n}\n\n.bracket-bl {\n bottom: -10px;\n left: -10px;\n border-right: none;\n border-top: none;\n}\n\n.bracket-br {\n bottom: -10px;\n right: -10px;\n border-left: none;\n border-top: none;\n}\n\n.brutalist-container:hover .corner-bracket {\n transform: scale(1.5);\n background: #000;\n border-color: #fff;\n}\n\n/* Typography accent */\n.type-accent {\n position: absolute;\n top: -30px;\n left: 0;\n font-family: \"JetBrains Mono\", monospace;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n color: #000;\n transition: all 0.4s ease;\n opacity: 0;\n}\n\n.brutalist-container:hover .type-accent {\n opacity: 1;\n transform: translateY(5px);\n}\n\n/* Industrial rivets */\n.rivet {\n position: absolute;\n width: 8px;\n height: 8px;\n background: #000;\n border-radius: 50%;\n border: 2px solid #333;\n transition: all 0.3s ease;\n}\n\n.rivet:nth-child(1) {\n top: 10px;\n left: 10px;\n}\n.rivet:nth-child(2) {\n top: 10px;\n right: 10px;\n}\n.rivet:nth-child(3) {\n bottom: 10px;\n left: 10px;\n}\n.rivet:nth-child(4) {\n bottom: 10px;\n right: 10px;\n}\n\n.brutalist-container:hover .rivet {\n background: #fff;\n transform: scale(1.5);\n}\n\n/* Scan line effect */\n.scan-effect {\n position: absolute;\n top: 0;\n left: -100%;\n width: 4px;\n height: 100%;\n background: linear-gradient(180deg, transparent, #fff, transparent);\n transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 0.8;\n}\n\n.brutalist-container:hover .scan-effect {\n left: 100%;\n}\n\n/* Paper texture overlay */\n.paper-texture {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at 20% 50%,\n transparent 20%,\n rgba(255, 255, 255, 0.3) 21%,\n rgba(255, 255, 255, 0.3) 34%,\n transparent 35%,\n transparent\n ),\n linear-gradient(\n 0deg,\n transparent 24%,\n rgba(255, 255, 255, 0.05) 25%,\n rgba(255, 255, 255, 0.05) 26%,\n transparent 27%,\n transparent 74%,\n rgba(255, 255, 255, 0.05) 75%,\n rgba(255, 255, 255, 0.05) 76%,\n transparent 77%,\n transparent\n );\n pointer-events: none;\n}\n"}

nice-parrot-39

👁 实时预览

📝 源代码