{"html":"

loading brutalism

\n","css":".brutalist-loader-wrapper {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n background: #000;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100em;\n font-family: \"Courier New\", monospace;\n overflow: hidden;\n position: relative;\n}\n\n.brutalist-loader-wrapper *,\n.brutalist-loader-wrapper *::before,\n.brutalist-loader-wrapper *::after {\n box-sizing: border-box;\n}\n\n/* Animated background with pure2d0606 CSS */\n.brutalist-loader-wrapper::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at 20% 80%,\n rgba(255, 51, 102, 0.1) 0%,\n transparent 50%\n ),\n radial-gradient(\n circle at 80% 20%,\n rgba(255, 107, 53, 0.1) 0%,\n transparent 50%\n ),\n radial-gradient(\n circle at 50% 50%,\n rgba(255, 0, 128, 0.05) 0%,\n transparent 70%\n );\n animation: backgroundChaos 4s ease-in-out infinite alternate;\n z-index: -1;\n}\n\n.brutalist-loader-wrapper::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 100px,\n rgba(255, 51, 102, 0.02) 101px,\n rgba(255, 51, 102, 0.02) 102px\n ),\n repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 100px,\n rgba(255, 107, 53, 0.02) 101px,\n rgba(255, 107, 53, 0.02) 102px\n );\n animation: gridShift 8s linear infinite;\n z-index: -1;\n}\n\n@keyframes backgroundChaos {\n 0% {\n opacity: 0.3;\n transform: scale(1) rotate(0deg);\n filter: hue-rotate(0deg);\n }\n 25% {\n opacity: 0.6;\n transform: scale(1.1) rotate(90deg);\n filter: hue-rotate(90deg);\n }\n 50% {\n opacity: 0.4;\n transform: scale(0.9) rotate(180deg);\n filter: hue-rotate(180deg);\n }\n 75% {\n opacity: 0.7;\n transform: scale(1.2) rotate(270deg);\n filter: hue-rotate(270deg);\n }\n 100% {\n opacity: 0.5;\n transform: scale(1) rotate(360deg);\n filter: hue-rotate(360deg);\n }\n}\n\n@keyframes gridShift {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(10px, -10px);\n }\n 50% {\n transform: translate(-5px, 15px);\n }\n 75% {\n transform: translate(15px, 5px);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n.container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 40px;\n animation: containerFloat 6s ease-in-out infinite;\n}\n\n@keyframes containerFloat {\n 0%,\n 100% {\n transform: translateY(0) rotate(0deg);\n }\n 33% {\n transform: translateY(-10px) rotate(0.5deg);\n }\n 66% {\n transform: translateY(5px) rotate(-0.3deg);\n }\n}\n\n.brutalist-loader {\n position: relative;\n width: 200px;\n height: 40px;\n perspective: 400px;\n transform-style: preserve-3d;\n cursor: pointer;\n animation: loaderBreathe 3s ease-in-out infinite;\n}\n\n@keyframes loaderBreathe {\n 0%,\n 100% {\n transform: scale(1) rotateX(0deg) rotateY(0deg);\n filter: saturate(1) contrast(1);\n }\n 50% {\n transform: scale(1.02) rotateX(2deg) rotateY(1deg);\n filter: saturate(1.1) contrast(1.1);\n }\n}\n\n.brutalist-loader:hover {\n animation:\n loaderBreathe 1s ease-in-out infinite,\n hoverChaos 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite,\n colorCycle 2s linear infinite;\n}\n\n@keyframes hoverChaos {\n 0% {\n transform: rotateX(10deg) rotateY(-5deg) scale(1.1);\n }\n 25% {\n transform: rotateX(12deg) rotateY(-3deg) scale(1.12) rotateZ(1deg);\n }\n 50% {\n transform: rotateX(8deg) rotateY(-7deg) scale(1.15) rotateZ(-0.5deg);\n }\n 75% {\n transform: rotateX(14deg) rotateY(-2deg) scale(1.13) rotateZ(0.8deg);\n }\n 100% {\n transform: rotateX(10deg) rotateY(-5deg) scale(1.1);\n }\n}\n\n@keyframes colorCycle {\n 0% {\n filter: saturate(1.5) contrast(1.2) hue-rotate(0deg);\n }\n 25% {\n filter: saturate(2) contrast(1.4) hue-rotate(90deg);\n }\n 50% {\n filter: saturate(1.8) contrast(1.6) hue-rotate(180deg);\n }\n 75% {\n filter: saturate(2.2) contrast(1.3) hue-rotate(270deg);\n }\n 100% {\n filter: saturate(1.5) contrast(1.2) hue-rotate(360deg);\n }\n}\n\n.loader-card {\n position: relative;\n width: 100%;\n height: 100%;\n background: #000;\n border: 6px solid #000;\n box-shadow:\n 8px 8px 0 #ff3366,\n 16px 16px 0 rgba(255, 51, 102, 0.6),\n 24px 24px 0 rgba(255, 51, 102, 0.3),\n 32px 32px 0 rgba(255, 51, 102, 0.1),\n 0 0 50px rgba(255, 51, 102, 0.4);\n overflow: hidden;\n transform-style: preserve-3d;\n animation: cardDance 5s ease-in-out infinite;\n}\n\n@keyframes cardDance {\n 0%,\n 100% {\n transform: translateZ(0px) rotateZ(0deg) skewX(0deg);\n box-shadow:\n 8px 8px 0 #ff3366,\n 16px 16px 0 rgba(255, 51, 102, 0.6),\n 24px 24px 0 rgba(255, 51, 102, 0.3),\n 32px 32px 0 rgba(255, 51, 102, 0.1),\n 0 0 50px rgba(255, 51, 102, 0.4);\n }\n 20% {\n transform: translateZ(15px) rotateZ(1deg) skewX(2deg);\n box-shadow:\n 12px 12px 0 #ff3366,\n 24px 24px 0 rgba(255, 51, 102, 0.7),\n 36px 36px 0 rgba(255, 51, 102, 0.4),\n 48px 48px 0 rgba(255, 51, 102, 0.2),\n 0 0 70px rgba(255, 51, 102, 0.6);\n }\n 40% {\n transform: translateZ(5px) rotateZ(-0.5deg) skewX(-1deg);\n box-shadow:\n 6px 6px 0 #ff3366,\n 12px 12px 0 rgba(255, 51, 102, 0.5),\n 18px 18px 0 rgba(255, 51, 102, 0.3),\n 24px 24px 0 rgba(255, 51, 102, 0.1),\n 0 0 40px rgba(255, 51, 102, 0.3);\n }\n 60% {\n transform: translateZ(20px) rotateZ(0.8deg) skewX(1.5deg);\n box-shadow:\n 14px 14px 0 #ff3366,\n 28px 28px 0 rgba(255, 51, 102, 0.8),\n 42px 42px 0 rgba(255, 51, 102, 0.5),\n 56px 56px 0 rgba(255, 51, 102, 0.3),\n 0 0 80px rgba(255, 51, 102, 0.7);\n }\n 80% {\n transform: translateZ(8px) rotateZ(-0.3deg) skewX(-0.5deg);\n box-shadow:\n 10px 10px 0 #ff3366,\n 20px 20px 0 rgba(255, 51, 102, 0.6),\n 30px 30px 0 rgba(255, 51, 102, 0.4),\n 40px 40px 0 rgba(255, 51, 102, 0.2),\n 0 0 60px rgba(255, 51, 102, 0.5);\n }\n}\n\n.brutalist-loader:hover .loader-card {\n animation:\n cardDance 1s ease-in-out infinite,\n hoverIntensity 0.3s linear infinite;\n}\n\n@keyframes hoverIntensity {\n 0% {\n box-shadow:\n 12px 12px 0 #ff3366,\n 24px 24px 0 rgba(255, 51, 102, 0.8),\n 36px 36px 0 rgba(255, 51, 102, 0.5),\n 48px 48px 0 rgba(255, 51, 102, 0.3),\n 0 0 100px rgba(255, 51, 102, 0.8);\n }\n 50% {\n box-shadow:\n 16px 16px 0 #ff3366,\n 32px 32px 0 rgba(255, 51, 102, 0.9),\n 48px 48px 0 rgba(255, 51, 102, 0.7),\n 64px 64px 0 rgba(255, 51, 102, 0.5),\n 0 0 150px rgba(255, 51, 102, 1);\n }\n 100% {\n box-shadow:\n 12px 12px 0 #ff3366,\n 24px 24px 0 rgba(255, 51, 102, 0.8),\n 36px 36px 0 rgba(255, 51, 102, 0.5),\n 48px 48px 0 rgba(255, 51, 102, 0.3),\n 0 0 100px rgba(255, 51, 102, 0.8);\n }\n}\n\n.loader-bar {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 30%;\n background: linear-gradient(90deg, #ff3366, #ff6b35);\n background-size: 400% 400%;\n animation:\n brutal-load 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite,\n colorShift 1.5s linear infinite,\n barGlitch 4s ease-in-out infinite;\n filter: drop-shadow(0 0 10px rgba(255, 51, 102, 0.8));\n}\n\n@keyframes brutal-load {\n 0% {\n left: -30%;\n width: 30%;\n transform: skewX(-15deg) scaleY(1);\n }\n 15% {\n width: 45%;\n transform: skewX(8deg) scaleY(1.1);\n }\n 30% {\n width: 60%;\n transform: skewX(-10deg) scaleY(0.9);\n }\n 45% {\n width: 70%;\n transform: skewX(12deg) scaleY(1.2);\n }\n 60% {\n width: 50%;\n transform: skewX(-6deg) scaleY(0.8);\n }\n 75% {\n width: 40%;\n transform: skewX(5deg) scaleY(1.1);\n }\n 90% {\n width: 35%;\n transform: skewX(-8deg) scaleY(1);\n }\n 100% {\n left: 100%;\n width: 30%;\n transform: skewX(-15deg) scaleY(1);\n }\n}\n\n@keyframes colorShift {\n 0% {\n background-position: 0% 50%;\n }\n 25% {\n background-position: 50% 0%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 75% {\n background-position: 50% 100%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\n@keyframes barGlitch {\n 0%,\n 90%,\n 100% {\n filter: drop-shadow(0 0 10px rgba(255, 51, 102, 0.8)) hue-rotate(0deg);\n }\n 5% {\n filter: drop-shadow(2px 0 15px rgba(0, 255, 255, 0.9)) hue-rotate(180deg);\n }\n 10% {\n filter: drop-shadow(-2px 0 15px rgba(255, 0, 255, 0.9)) hue-rotate(90deg);\n }\n 15% {\n filter: drop-shadow(0 2px 15px rgba(255, 255, 0, 0.9)) hue-rotate(270deg);\n }\n}\n\n.brutalist-loader:hover .loader-bar {\n animation-duration: 0.8s, 0.5s, 1s;\n filter: drop-shadow(0 0 20px rgba(255, 51, 102, 1)) saturate(2);\n}\n\n/* Multiple advanced glitch layers */\n.loader-card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(0, 255, 255, 0.3) 20%,\n rgba(255, 255, 255, 0.8) 40%,\n rgba(255, 0, 255, 0.6) 60%,\n rgba(255, 255, 0, 0.4) 80%,\n transparent 100%\n );\n animation: glitchSweep 3s linear infinite;\n z-index: 2;\n mix-blend-mode: screen;\n}\n\n.loader-card::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 2px,\n rgba(255, 51, 102, 0.1) 2px,\n rgba(255, 51, 102, 0.1) 4px\n ),\n repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 8px,\n rgba(255, 107, 53, 0.05) 8px,\n rgba(255, 107, 53, 0.05) 10px\n );\n animation: scanlines 0.15s linear infinite;\n z-index: 3;\n mix-blend-mode: overlay;\n}\n\n@keyframes glitchSweep {\n 0% {\n left: -100%;\n opacity: 0;\n transform: skewX(0deg);\n }\n 5% {\n opacity: 0.8;\n transform: skewX(-10deg);\n }\n 10% {\n left: -70%;\n opacity: 1;\n transform: skewX(5deg);\n }\n 15% {\n opacity: 0.6;\n transform: skewX(-8deg);\n }\n 20% {\n left: -40%;\n opacity: 0.9;\n transform: skewX(12deg);\n }\n 25% {\n opacity: 0.4;\n transform: skewX(-15deg);\n }\n 30% {\n left: -10%;\n opacity: 0.8;\n transform: skewX(8deg);\n }\n 35% {\n opacity: 0.2;\n transform: skewX(-5deg);\n }\n 40% {\n left: 20%;\n opacity: 0.7;\n transform: skewX(10deg);\n }\n 45% {\n left: 50%;\n opacity: 0.3;\n transform: skewX(-12deg);\n }\n 50% {\n left: 80%;\n opacity: 0.5;\n transform: skewX(6deg);\n }\n 55% {\n left: 100%;\n opacity: 0;\n transform: skewX(0deg);\n }\n 100% {\n left: 100%;\n opacity: 0;\n transform: skewX(0deg);\n }\n}\n\n@keyframes scanlines {\n 0% {\n transform: translateY(0) scaleY(1);\n }\n 50% {\n transform: translateY(2px) scaleY(1.05);\n }\n 100% {\n transform: translateY(4px) scaleY(1);\n }\n}\n\n.brutalist-loader:hover .loader-card::before {\n animation-duration: 1s;\n}\n\n.brutalist-loader:hover .loader-card::after {\n animation-duration: 0.08s;\n}\n\n/* Extreme brutal text effects */\n.brutal-text {\n color: #ff3366;\n font-size: 24px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 4px;\n text-shadow:\n 3px 3px 0 #000,\n 6px 6px 0 rgba(255, 51, 102, 0.5),\n 9px 9px 0 rgba(255, 107, 53, 0.3),\n 0 0 20px rgba(255, 51, 102, 0.8);\n animation: textChaos 4s ease-in-out infinite;\n user-select: none;\n position: relative;\n}\n\n@keyframes textChaos {\n 0%,\n 85%,\n 100% {\n transform: translate(0) scale(1);\n filter: hue-rotate(0deg) saturate(1);\n text-shadow:\n 3px 3px 0 #000,\n 6px 6px 0 rgba(255, 51, 102, 0.5),\n 9px 9px 0 rgba(255, 107, 53, 0.3),\n 0 0 20px rgba(255, 51, 102, 0.8);\n }\n 5% {\n transform: translate(-3px, 2px) scale(0.98);\n filter: hue-rotate(90deg) saturate(1.5);\n text-shadow:\n 5px 1px 0 #000,\n 8px 4px 0 rgba(0, 255, 255, 0.7),\n 11px 7px 0 rgba(255, 0, 255, 0.5),\n 0 0 30px rgba(0, 255, 255, 0.9);\n }\n 10% {\n transform: translate(2px, -3px) scale(1.02);\n filter: hue-rotate(180deg) saturate(2);\n text-shadow:\n 1px 5px 0 #000,\n 4px 8px 0 rgba(255, 255, 0, 0.7),\n 7px 11px 0 rgba(255, 0, 128, 0.5),\n 0 0 40px rgba(255, 255, 0, 0.9);\n }\n 15% {\n transform: translate(-2px, 3px) scale(0.99);\n filter: hue-rotate(270deg) saturate(1.8);\n text-shadow:\n 4px 2px 0 #000,\n 7px 5px 0 rgba(128, 255, 0, 0.7),\n 10px 8px 0 rgba(255, 128, 0, 0.5),\n 0 0 35px rgba(128, 255, 0, 0.9);\n }\n 20% {\n transform: translate(1px, -2px) scale(1.01);\n filter: hue-rotate(45deg) saturate(1.3);\n text-shadow:\n 2px 4px 0 #000,\n 5px 7px 0 rgba(255, 0, 255, 0.6),\n 8px 10px 0 rgba(0, 255, 128, 0.4),\n 0 0 25px rgba(255, 0, 255, 0.8);\n }\n}\n\n.brutal-text::before {\n content: \"LOADING BRUTALISM\";\n position: absolute;\n top: 0;\n left: 0;\n color: rgba(0, 255, 255, 0.3);\n animation: textGhost 2s linear infinite;\n z-index: -1;\n}\n\n.brutal-text::after {\n content: \"LOADING BRUTALISM\";\n position: absolute;\n top: 0;\n left: 0;\n color: rgba(255, 0, 255, 0.2);\n animation: textGhost2 1.5s linear infinite reverse;\n z-index: -1;\n}\n\n@keyframes textGhost {\n 0% {\n transform: translate(0);\n opacity: 0.3;\n }\n 25% {\n transform: translate(1px, -1px);\n opacity: 0.5;\n }\n 50% {\n transform: translate(-1px, 1px);\n opacity: 0.2;\n }\n 75% {\n transform: translate(1px, 1px);\n opacity: 0.4;\n }\n 100% {\n transform: translate(0);\n opacity: 0.3;\n }\n}\n\n@keyframes textGhost2 {\n 0% {\n transform: translate(0);\n opacity: 0.2;\n }\n 33% {\n transform: translate(-1px, 1px);\n opacity: 0.4;\n }\n 66% {\n transform: translate(1px, -1px);\n opacity: 0.1;\n }\n 100% {\n transform: translate(0);\n opacity: 0.2;\n }\n}\n\n.brutalist-loader:hover ~ .brutal-text {\n animation-duration: 0.8s;\n text-shadow:\n 5px 5px 0 #000,\n 10px 10px 0 rgba(255, 51, 102, 0.8),\n 15px 15px 0 rgba(255, 107, 53, 0.6),\n 0 0 40px rgba(255, 51, 102, 1);\n}\n\n.brutalist-loader:hover ~ .brutal-text::before {\n animation-duration: 0.3s;\n}\n\n.brutalist-loader:hover ~ .brutal-text::after {\n animation-duration: 0.2s;\n}\n\n/* Additional noise and chaos effects */\n.noise {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-conic-gradient(\n from 0deg at 30% 70%,\n rgba(255, 51, 102, 0.03) 0deg,\n transparent 2deg,\n rgba(255, 107, 53, 0.03) 4deg,\n transparent 6deg\n ),\n repeating-conic-gradient(\n from 180deg at 70% 30%,\n rgba(255, 0, 128, 0.02) 0deg,\n transparent 3deg,\n rgba(0, 255, 255, 0.02) 6deg,\n transparent 9deg\n );\n animation: noiseStorm 12s linear infinite;\n pointer-events: none;\n z-index: 1;\n mix-blend-mode: color-dodge;\n}\n\n@keyframes noiseStorm {\n 0% {\n transform: rotate(0deg) scale(1) translate(0, 0);\n opacity: 0.3;\n }\n 25% {\n transform: rotate(90deg) scale(1.2) translate(5px, -5px);\n opacity: 0.6;\n }\n 50% {\n transform: rotate(180deg) scale(0.8) translate(-3px, 8px);\n opacity: 0.4;\n }\n 75% {\n transform: rotate(270deg) scale(1.1) translate(8px, 3px);\n opacity: 0.7;\n }\n 100% {\n transform: rotate(360deg) scale(1) translate(0, 0);\n opacity: 0.3;\n }\n}\n\n/* Responsive design */\n@media (max-width: 768px) {\n .brutalist-loader {\n width: 250px;\n height: 50px;\n }\n\n .brutal-text {\n font-size: 18px;\n letter-spacing: 2px;\n }\n}\n\n@media (max-width: 480px) {\n .brutalist-loader {\n width: 200px;\n height: 40px;\n }\n\n .brutal-text {\n font-size: 14px;\n letter-spacing: 1px;\n }\n}\n"}

dull-fox-23

👁 实时预览

📝 源代码