{"html":"

\n \n \n \n \n \n \n \n \n \n M2\n

\n","css":".m2 {\n position: relative;\n width: 20vmin; /* Reduced size */\n height: 20vmin; /* Reduced size */\n background: linear-gradient(135deg, #1e1e24 10%, #050505 60%);\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n animation: gradient-shift 5s ease-in-out infinite; /* Faster animation */\n background-size: 200% 200%; /* Gradient shift */\n}\n\n.m2 .logo {\n display: inline-block;\n vertical-align: baseline;\n user-select: none;\n font-size: 5vmin; /* Smaller font size */\n color: white;\n background-image: linear-gradient(to right, #626262, #fff);\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n font-weight: bold;\n}\n\n.m2 .logo svg {\n margin-right: -1vmin;\n width: 5vmin; /* Smaller SVG size */\n height: 5vmin; /* Smaller SVG size */\n}\n\n.m2::before,\n.m2::after {\n --size: 5px; /* Reduced glow size */\n content: \"\";\n position: absolute;\n top: calc(var(--size) / -2);\n left: calc(var(--size) / -2);\n width: calc(100% + var(--size));\n height: calc(100% + var(--size));\n background: radial-gradient(circle at 0 0, hsl(27deg 93% 60%), transparent),\n radial-gradient(circle at 100% 0, #00a6ff, transparent),\n radial-gradient(circle at 0 100%, #ff0056, transparent),\n radial-gradient(circle at 100% 100%, #6500ff, transparent);\n}\n\n.m2::after {\n --size: 2px; /* Reduced inner glow size */\n z-index: -1;\n}\n\n.m2::before {\n --size: 10px; /* Reduced outer glow size */\n z-index: -2;\n filter: blur(2vmin); /* Reduced blur */\n animation: blur-animation 3s ease-in-out alternate infinite; /* Faster blur animation */\n}\n\n/* Faster blur animation */\n@keyframes blur-animation {\n to {\n filter: blur(3vmin);\n transform: scale(1.05);\n }\n}\n\n/* Faster gradient animation */\n@keyframes gradient-shift {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n"}

loud-crab-37

👁 实时预览

📝 源代码