{"html":"

\n\n

\n","css":".bg {\n background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.fractal {\n position: absolute;\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n grid-template-rows: repeat(8, 1fr);\n gap: 0.5vmin;\n transform: rotate(0deg);\n transition: transform 1s ease;\n}\n\n.cell {\n position: relative;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 3px;\n overflow: hidden;\n transition: all 0.4s ease;\n}\n\n.cell::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at center,\n transparent 40%,\n currentColor 100%\n );\n opacity: 0.3;\n}\n\n.cell:nth-child(4n + 1) {\n background: linear-gradient(\n 135deg,\n rgba(106, 17, 203, 0.3),\n rgba(37, 117, 252, 0.2)\n );\n color: #6a11cb;\n animation: pulse1 6s infinite alternate;\n}\n\n.cell:nth-child(4n + 2) {\n background: linear-gradient(\n 135deg,\n rgba(255, 100, 100, 0.3),\n rgba(255, 200, 100, 0.2)\n );\n color: #ff6464;\n animation: pulse2 7s infinite alternate;\n}\n\n.cell:nth-child(4n + 3) {\n background: linear-gradient(\n 135deg,\n rgba(100, 255, 218, 0.3),\n rgba(100, 220, 255, 0.2)\n );\n color: #64ffda;\n animation: pulse3 5s infinite alternate;\n}\n\n.cell:nth-child(4n + 4) {\n background: linear-gradient(\n 135deg,\n rgba(255, 100, 220, 0.3),\n rgba(200, 100, 255, 0.2)\n );\n color: #ff64dc;\n animation: pulse4 8s infinite alternate;\n}\n\n/* Nested grid inside each cell */\n.nested-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: 1px;\n}\n\n.mini-cell {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 1px;\n}\n\n/* Central focus element */\n.center-element {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 30%;\n height: 30%;\n background: linear-gradient(135deg, #6a11cb, #2575fc);\n border-radius: 50%;\n z-index: 10;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow:\n 0 0 40px rgba(106, 17, 203, 0.7),\n inset 0 0 30px rgba(255, 255, 255, 0.3);\n animation: rotate 20s linear infinite;\n}\n\n.center-element::before {\n content: \"\";\n position: absolute;\n width: 80%;\n height: 80%;\n border: 3px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n animation: rotate-reverse 15s linear infinite;\n}\n\n.center-element::after {\n content: \"\";\n position: absolute;\n width: 50%;\n height: 50%;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 50%;\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);\n}\n\n/* Animation definitions */\n@keyframes pulse1 {\n 0% {\n opacity: 0.6;\n transform: scale(1);\n }\n 100% {\n opacity: 1;\n transform: scale(1.05);\n }\n}\n\n@keyframes pulse2 {\n 0% {\n opacity: 0.6;\n transform: scale(1) rotate(0deg);\n }\n 100% {\n opacity: 1;\n transform: scale(1.03) rotate(5deg);\n }\n}\n\n@keyframes pulse3 {\n 0% {\n opacity: 0.6;\n transform: scale(1);\n }\n 100% {\n opacity: 1;\n transform: scale(0.97);\n }\n}\n\n@keyframes pulse4 {\n 0% {\n opacity: 0.6;\n transform: scale(1) rotate(0deg);\n }\n 100% {\n opacity: 1;\n transform: scale(1.02) rotate(-3deg);\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n\n@keyframes rotate-reverse {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n\n/* Title styling */\n.title {\n position: absolute;\n top: 20px;\n left: 0;\n width: 100%;\n text-align: center;\n color: white;\n font-size: 2.5rem;\n text-transform: uppercase;\n letter-spacing: 3px;\n text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\n z-index: 100;\n opacity: 0.9;\n}\n\n.subtitle {\n position: absolute;\n bottom: 20px;\n left: 0;\n width: 100%;\n text-align: center;\n color: rgba(255, 255, 255, 0.7);\n font-size: 1rem;\n letter-spacing: 2px;\n}\n\n/* Corner elements */\n.corner {\n position: absolute;\n width: 30px;\n height: 30px;\n z-index: 20;\n}\n\n.corner-tl {\n top: 20px;\n left: 20px;\n border-top: 3px solid #6a11cb;\n border-left: 3px solid #6a11cb;\n}\n\n.corner-tr {\n top: 20px;\n right: 20px;\n border-top: 3px solid #ff6464;\n border-right: 3px solid #ff6464;\n}\n\n.corner-br {\n bottom: 20px;\n right: 20px;\n border-bottom: 3px solid #64ffda;\n border-right: 3px solid #64ffda;\n}\n\n.corner-bl {\n bottom: 20px;\n left: 20px;\n border-bottom: 3px solid #ff64dc;\n border-left: 3px solid #ff64dc;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n .title {\n font-size: 1.8rem;\n }\n\n .subtitle {\n font-size: 0.8rem;\n }\n}\n"}

unlucky-cobra-43

👁 实时预览

📝 源代码